• 旋转的骰子（二）

    1.动画——旋转的骰子

    上一次我们做了一个旋转的骰子（参看第2讲），这次我们想要点击按钮，让骰子旋转到特定的点数停下来！

    2.分析需求——庖丁解牛

    a.立方体特定的朝向对应着特定的旋转角度

       骰子显示特定点数，无非就是旋转骰子，让特定点数的面朝向屏幕外侧

    b.通过自定义属性控制旋转角度

       利用css属性选择器，将特定属性值和骰子旋转样式，建立一一对应关系

    c.通过类进行动画控制

       通过添加类，删除类，启动动画

    d.添加控制按钮，触发动画

       添加6个按钮，点击，触发筛子旋转，方便调试

    3.旋转特定角度，露出特定平面

    4.自定义属性的设置 

    与表达式

    “与”表达式（&&），准确的说是“逻辑与”表达式，形式为： A && B && C。

    其中A，B，C为子表达式，子表达式数目不限，只有所有的子表达式都为true，整个表达式的值才为true.

    判断为true的常见类型：

      布尔值true，非零数值，对象，字符串

    判断为false的常见类型：

      布尔值false，数值0，空对象（null)，未定义变量（undefine)

    与表达式是可以赋值给给其他变量的，它的值的分两种情况：

    • 如果整个表达式的值为 true ，则整个表达式的值，是 最后一个为 true 的，子表达式的值 ；
    • 如果表达式的值为 false ， 则整个表达式的值，为 第一个为 false 的子表达式的值 。

    如下图所示

     5.动画的开启/结束

     

     6.测试按钮

     

     

     7.更多思考

    我们可以制作一个骰子，然后通过单一按钮，进行随机投掷，这样就变成了一个有趣的小游戏

    8 代码

    注意代码中引用jquery-1.12.4.js，可自行到官网下载

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8"/>
    5. 		<title>Rotate Dicetitle>
    6. 		<link rel="stylesheet" type="text/css" href="./styles.css"/>
    7. 	head>
    8. 	<body>
    9. 		<div class="dice">
    10. 			<div class="vertical">
    11.         <div class="horizontal">
    12.           <div class="cube" point="">
    13.             <div class="face front one">
    14.               <span class="dot">span>
    15.             div>
    16.             <div class="face back two">
    17.               <span class="dot">span>
    18.               <span class="dot">span>
    19.             div>
    20.             <div class="face up three">
    21.               <span class="dot">span>
    22.               <span class="dot">span>
    23.               <span class="dot">span>
    24.             div>
    25.             <div class="face down four">
    26.               <div class="dot-row">
    27.                 <span class="dot">span>
    28.                 <span class="dot">span>
    29.               div>
    30.               <div class="dot-row">
    31.                 <span class="dot">span>
    32.                 <span class="dot">span>
    33.               div>
    34.             div>
    35.             <div class="face left five">
    36.               <div class="dot-row">
    37.                 <span class="dot">span>
    38.                 <span class="dot">span>
    39.               div>
    40.               <div class="dot-row">
    41.                 <span class="dot">span>
    42.               div>
    43.               <div class="dot-row">
    44.                 <span class="dot">span>
    45.                 <span class="dot">span>
    46.               div>
    47.             div>
    48.             <div class="face right six">
    49.               <div class="dot-row">
    50.                 <span class="dot">span>
    51.                 <span class="dot">span>
    52.                 <span class="dot">span>
    53.               div>
    54.               <div class="dot-row">
    55.                 <span class="dot">span>
    56.                 <span class="dot">span>
    57.                 <span class="dot">span>
    58.               div>
    59.             div>
    60.             <div class="axis-face x">div>
    61.             <div class="axis-face y">div>
    62.             <div class="axis-face z">div>
    63.           div>
    64. 				div>
    65. 			div>
    66. 		div>
    67. 		<div class="btn-group">
    68. 			<button class="" point="1">1button>
    69. 			<button class="" point="2">2button>
    70. 			<button class="" point="3">3button>
    71. 			<button class="" point="4">4button>
    72. 			<button class="" point="5">5button>
    73. 			<button class="" point="6">6button>
    74. 		div>
    75. 		<script src="./jquery-1.12.4.js">script>
    76. 		<script src="./think.js">script>
    77. 	body>
    78. html>

     

     

    1. html
    2. {
    3. 	background-color: black;
    4. 	font-size:100px;
    5. 	padding: 1em;
    6. 	text-align: center;
    7. }
    8. .btn-group{
    9. 	display: inline-block;
    10. }
    11.  
    12. /*骰子动画*/
    13. .dice.ani .vertical{
    14. 	animation: jump 1s linear;
    15. }
    16. .dice.ani .horizontal{
    17. 	animation: rotateY 2s ease-out;
    18. }
    19. .dice.ani .cube{
    20. 	transition: transform 2.1s ;
    21. }
    22.  
    23. @keyframes rotateY {
    24. 	from{transform:rotateY(0);}
    25. 	to{transform:rotateY(1800deg);}
    26. }
    27. /*@keyframes rotateX {
    28. 	from{transform:rotateX(0);}
    29. 	to{transform:rotateX(3600deg);}
    30. }*/
    31. @keyframes jump {
    32. 		from{transform: translateY(-3.6em);}
    33. 		30%{transform: translateY(-3em);}
    34. 		60%{transform: translateY(0);}
    35. 		70%{transform: translateY(-1.5em);}
    36. 		80%{transform: translateY(0);}
    37. 		90%{transform: translateY(-.6em);}
    38. 		to,10%{transform: translateY(0);}
    39. }
    40.  
    41. /*转到对应点数的动画*/
    42. .cube{
    43. 	transform: rotateX(-10deg) rotateY(10deg);
    44. }
    45. .cube[point=p1]{
    46.   transform: rotateX(-10deg) rotateY(10deg);
    47. }
    48. .cube[point=p2]{
    49.   transform: rotateX(-10deg) rotateY(190deg);
    50. }
    51. .cube[point=p3]{
    52.   transform: rotateX(-100deg) rotateY(0) rotateZ(10deg);
    53. }
    54. .cube[point=p4]{
    55.   transform: rotateX(80deg) rotateY(0) rotateZ(-10deg);
    56. }
    57. .cube[point=p5]{
    58.   transform: rotateX(-10deg) rotateY(100deg);
    59. }
    60. .cube[point=p6]{
    61.   transform: rotateX(-10deg) rotateY(-80deg);
    62. }
    63.  
    64. /*面的样式*/
    65. .dice,.vertical,.horizontal,.cube,.face{
    66. 	transform-style:preserve-3d;
    67. }
    68. .dice,.vertical,.horizontal,.cube,.face,.face::after,.axis-face{
    69. 	width:1em;
    70. 	height: 1em;
    71. }
    72. .dice{
    73. 	margin: auto;
    74. }
    75. .cube{
    76.   position: relative;
    77. }
    78. .face,.face::after,.axis-face{
    79. 	position: absolute;
    80.   top:0;
    81.   left: 0;
    82. }
    83. .face{
    84. 	box-sizing: border-box;
    85.   padding: .15em;
    86.   background-color: white;
    87.   border-radius: 40%;
    88.   box-shadow: 0 0 .2em #ccc inset;
    89. }
    90. .face::after{
    91.   content:"";
    92.   display: block;
    93.   border-radius: .2em;
    94.   transform: translateZ(-.1px);
    95.   background-color: #e0e0e0;
    96. }
    97. .axis-face{
    98.   background:#e0e0e0;
    99. }
    100.  
    101. /*点的样式*/
    102. .dot{
    103.   width:.2em;
    104.   height: .2em;
    105.   display: inline-block;
    106.   background: #444;
    107.   border-radius: 50%;
    108.   box-shadow: inset .05em .05em .1em black;
    109. }
    110. /* 面的方位*/
    111. .face.front{
    112.   transform: translateZ(.5em);
    113. }
    114. .face.back{
    115.   transform: translateZ(-.5em) rotateY(180deg);
    116. }
    117. .face.up{
    118.   transform: translateY(-50%) rotateX(90deg);
    119. }
    120. .face.down{
    121.   transform: translateY(50%) rotateX(-90deg);
    122. }
    123. .face.left{
    124.   transform: translateX(-50%) rotateY(-90deg);
    125. }
    126. .face.right{
    127.   transform: translateX(50%) rotateY(90deg);
    128. }
    129. .axis-face.x{
    130.   transform:rotateY(90deg);
    131. }
    132. .axis-face.y{
    133.   transform:rotateX(90deg);
    134. }
    135. .axis-face.z{
    136. }
    137.  
    138. /* 点的排列布局*/
    139. .face,.dot-row{
    140.   display: flex;
    141. }
    142. .face.one{
    143.   align-items: center;
    144.   justify-content: center;
    145. }
    146. .face.two{
    147.   justify-content: space-around;
    148. }
    149. .face.two .dot:nth-child(2){
    150.   align-self: flex-end;
    151. }
    152. .face.three{
    153.   justify-content: space-around;
    154. }
    155. .face.three .dot:nth-child(2){
    156.   align-self:center;
    157. }
    158. .face.three .dot:nth-child(3){
    159.   align-self: flex-end;
    160. }
    161. .face.four{
    162.   flex-direction: column;
    163.   justify-content: space-between;
    164. }
    165. .face.four .dot-row{
    166.   justify-content: space-between;
    167. }
    168. .face.five{
    169.   flex-direction: column;
    170.   justify-content: space-between;
    171. }
    172. .face.five .dot-row{
    173.   justify-content: space-between;
    174. }
    175. .face.five .dot-row:nth-child(2){
    176.   justify-content:center;
    177. }
    178. .face.six{
    179.   flex-direction: column;
    180.   justify-content: space-around;
    181. }
    182. .face.six .dot-row{
    183.   justify-content: space-between;
    184. }
    1. jQuery(function($){
    2. 	var $btnGroup = $('.btn-group'),
    3. 			$cube = $('.cube'),
    4. 			$dice = $('.dice');
    5. 	$btnGroup.on('click',onclick_btn);
    6. 	$cube.on('transitionend',onAniEnd);
    7.  
    8. 	function onclick_btn(e){
    9. 		var point,
    10. 				$btn;
    11. 		if(!$dice.hasClass('ani') && e.target.tagName =="BUTTON"){
    12. 			$btn = $(e.target);
    13. 			point = parseInt($btn.attr('point'));
    14. 			if(setPoint(point)){
    15. 				$dice.addClass('ani');
    16. 			}
    17. 		}
    18. 	}
    19. 	function setPoint(point){
    20. 		var prePoint,
    21. 				pointStr,
    22. 				num;
    23. 		pointStr = $cube.attr('point').match(/\d/);
    24. 		num = pointStr && pointStr.length>0 && pointStr[0];
    25. 		prePoint = parseInt(num);
    26. 		if(prePoint != point){
    27. 			$cube.attr("point","p"+point);
    28. 			return true;
    29. 		}else {
    30. 			return false;
    31. 		}
    32. 	}
    33. 	function onAniEnd(e){
    34. 		$dice.removeClass('ani');
    35. 	}
    36.  
    37. });

  • 相关阅读:
    【微服务】Sentinel 控制台
    继承(个人学习笔记黑马学习)
    MySQL进阶之存储引擎和索引
    算法学习笔记 - 网络流初步
    过拟合和欠拟合是什么？有什么异同点？解决办法是什么？
    Linux Crontab 定时任务使用示例
    3分钟开通GPT-4
    使用Hbuilder+Xcode打包iOS app前期准备
    丹尼尔·拉瑞莫(BM)：EOS的主要开发者
    【网络结构】VGG
  • 原文地址：https://blog.csdn.net/konglingbin66/article/details/128033429