开发姿势篇——动效设计1

动效示例

正方体动效

关于动画

  动画的英文有很多表述,如animation、cartoon、animated cartoon、cameracature。其中较正式的 “Animation” 一词源自于拉丁文字根anima,意思为“灵魂”,动词animate是“赋予生命”的意思,引申为使某物活起来的意思。所以动画可以定义为使用绘画的手法,创造生命运动的艺术。


动效设计

  继上篇基础开发篇,了解页面基础搭建和布局之后,接着便是对用户更加友好的动效体验。上面关于动画中提起,动画可以定义为使用绘画的手法,创造生命运动的艺术,因此在基础篇后,如何让页面/元素动起来,就是我们开发中的乐趣与艺术所在。
  本片总结参考凹凸实验室小册——大厂h5开发实战手册

0. 分析

  完成上述动画,我们需要做以下几步

  • 图片素材准备
  • 基础布局
  • 立体尝试
  • 帧动画准备
  • 动起来

接下来一步步来。

1. 素材

  任意图片即可,满足正方体六面使用。

2. 基础布局

html

1
2
3
4
5
6
7
8
9
10
 <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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$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的两个特性:transformtranslate,然后继续布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$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;
}

}
}
}

动效设计1-1

  此时,我们将得到一个正面的结构体如上所示。那么我们如何让它展示的更加立体呢?给.cube添加代码,使其根据自身有一定的角度偏移量,然后得到更加立体的效果如下:

1
2
3
.showDefault{
transform: translateZ( - $cube-radius ) rotateY( -20deg ) rotateX(-20deg);
}

动效设计1-2

  ok,至此我们已经将基本效果完成。接下来,如何给它赋予灵魂,使其动起来呢?

4. 帧动画准备

  首先需要了解以下帧动画(关键帧动画)

  任何动画要表现运动或变化,至少前后要给出两个不同的关键状态,而中间状态的变化和衔接电脑可以自动完成,在Flash中,表示关键状态的帧动画叫做关键帧动画。
  所谓关键帧动画,就是给需要动画效果的属性,准备一组与时间相关的值,这些值都是在动画序列中比较关键的帧中提取出来的,而其他时间帧中的值,可以用这些关键值,采用特定的插值方法计算得到,从而达到比较流畅的动画效果。

  那么,在css中,关键帧动画两个内容需要掌握,可以从MDN或者别的网站上学习关于这两个内容:

  • 关键帧(@keyframes)
  • animation属性

  了解之后,我们可以来定制我们的关键帧动画了。通过分析可得,我们要展示比较安全的动画效果,此处需要这设置6个关键动画,分别展示正方体的六个面。那么我们便从0%-100%分别设置六个面即可。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 帧动画 */
@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最后,设置动画相关属性,如几秒加载完成、循环播放、渐进式等等。示例如下:

1
2
3
.cube{
animation: autoRun ease 10s alternate infinite;
}

  最终,得到效果图展示的立方体动效:
正方体动效

end

---本文结束感谢您的阅读---

本文标题:开发姿势篇——动效设计1

文章作者:Lomo 朱幸民

发布时间:2019年10月12日 - 15:27:57

最后更新:2019年10月12日 - 17:07:20

原始链接:https://www.zhuxingmin.com/2019/10/12/开发姿势篇——动效设计1/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%