开发姿势篇——动效设计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的两个特性:transformtranslate,然后继续布局:

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

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

正方体动效.gif

end

推荐阅读更多精彩内容