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

动效示例

正方体动效.gif

关于动画

动画的英文有很多表述，如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;
            }

        }
    }
}

动效设计1-1.png

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

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

动效设计1-2.png

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;
}

最终，得到效果图展示的立方体动效：