开发姿势篇——动效设计1
开发姿势篇——动效设计1
动效示例
关于动画
动画的英文有很多表述，如animation、cartoon、animated cartoon、cameracature。其中较正式的 "Animation" 一词源自于拉丁文字根anima，意思为“灵魂”，动词animate是“赋予生命”的意思，引申为使某物活起来的意思。所以动画可以定义为使用绘画的手法，创造生命运动的艺术。
动效设计
继上篇基础开发篇，了解页面基础搭建和布局之后，接着便是对用户更加友好的动效体验。上面关于动画中提起，动画可以定义为使用绘画的手法，创造生命运动的艺术，因此在基础篇后，如何让页面/元素动起来，就是我们开发中的乐趣与艺术所在。 本片总结参考 凹凸实验室小册——大厂h5开发实战手册。
0. 分析
完成上述动画，我们需要做以下几步
- 图片素材准备
- 基础布局
- 立体尝试
- 帧动画准备
- 动起来
接下来一步步来。
1. 素材
任意图片即可，满足正方体六面使用。
2. 基础布局
html
<div class="move">
<div class="cube showDefault">
<div class="cube-face c-front"><img src="xxx" alt="photo1"></div>
<div class="cube-face c-back"><img src=".xxx" alt="photo2"></div>
<div class="cube-face c-top"><img src="xxx" alt="photo3"></div>
<div class="cube-face c-bottom"><img src="xxx" alt="photo4"></div>
<div class="cube-face c-left"><img src="xxx" alt="photo5"></div>
<div class="cube-face c-right"><img src="xxx" alt="photo6"></div>
</div>
</div>css(此处用的scss)
$cube-size: 500px;
$cube-radius: $cube-size / 2;
.move{
width: $cube-size;
height: $cube-size;
perspective: 1000px; /* 设置元素被查看位置的视图 */
/*-webkit-perspective: 1000px;*/
position: relative;
margin: 50px auto 0;
.cube{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d; /* 3d */
&-face{
border: 2px solid #000;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
opacity: .95;
backface-visibility: visible; /* 隐藏被旋转元素的背面 */
img{
width: 100%;
display: block;
}
}
}
}到此处为止，基础布局已经可以了，只是由于没有给六个面单独设置3d效果，因此看到的是六张图叠加在一起，效果不够明显。接下来尝试让它变得更加立体。
3. 立体尝试
当然，想要立体，还是需要给六个面依次设置。本小结需要了解css3的两个特性：transform和 translate，然后继续布局：
$cube-size: 300px;
$cube-radius: $cube-size / 2;
.move{
width: $cube-size;
height: $cube-size;
perspective: 1000px; /* 设置元素被查看位置的视图 */
-webkit-perspective: 1000px;
position: relative;
margin: 50px auto 0;
.cube{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d; /* 3d */
&-face{
border: 2px solid #000;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
opacity: .95;
backface-visibility: visible; /* 隐藏被旋转元素的背面 */
&.c-front{
transform: translateZ( $cube-radius );
}
&.c-back{
transform: rotateX( -180deg ) translateZ( $cube-radius );
}
&.c-top{
transform: rotateX( 90deg ) translateZ( $cube-radius );
}
&.c-bottom{
transform: rotateX( -90deg ) translateZ( $cube-radius );
}
&.c-left{
transform: rotateY( -90deg ) translateZ( $cube-radius );
}
&.c-right{
transform: rotateY( 90deg ) translateZ( $cube-radius );
}
img{
width: 100%;
display: block;
}
}
}
}
此时，我们将得到一个正面的结构体如上所示。那么我们如何让它展示的更加立体呢？给 .cube添加代码，使其根据自身有一定的角度偏移量，然后得到更加立体的效果如下：
.showDefault{
transform: translateZ( - $cube-radius ) rotateY( -20deg ) rotateX(-20deg);
}
ok，至此我们已经将基本效果完成。接下来，如何给它赋予灵魂，使其动起来呢？
4. 帧动画准备
首先需要了解以下 帧动画（关键帧动画）
任何动画要表现运动或变化，至少前后要给出两个不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，在Flash中，表示关键状态的帧动画叫做关键帧动画。 所谓关键帧动画，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。
那么，在css中，关键帧动画两个内容需要掌握，可以从MDN或者别的网站上学习关于这两个内容：
- 关键帧(@keyframes)
- animation属性
了解之后，我们可以来定制我们的关键帧动画了。通过分析可得，我们要展示比较安全的动画效果，此处需要这设置6个关键动画，分别展示正方体的六个面。那么我们便从0%-100%分别设置六个面即可。如下：
/* 帧动画 */
@keyframes autoRun {
/* front */
0%, 100%{
transform: translateZ( -$cube-radius );
}
/* back */
16.5%{
transform: translateZ( -$cube-radius ) rotateX( -180deg );
}
/* left */
33%{
transform: translateZ( -$cube-radius ) rotateY( 90deg );
}
/* right */
49.5%{
transform: translateZ( -$cube-radius ) rotateY( -90deg );
}
/* top */
66%{
transform: translateZ( -$cube-radius ) rotateX( -90deg );
}
/* bottom */
82.5%{
transform: translateZ( -$cube-radius ) rotateX( 90deg );
}
}5. 动起来
设置完了帧动画，我们关键在于运用。那如何将动画引入到我们的css中去呢？首先，确定位置：我们要使正方体动起来，因此添加到 .cube内；其次，我们要添加帧动画，因此要写明帧动画名称，也就是刚才定义的 autoRun；最后，设置动画相关属性，如几秒加载完成、循环播放、渐进式等等。示例如下：
.cube{
animation: autoRun ease 10s alternate infinite;
}最终，得到效果图展示的立方体动效：