css动效之入场动画

动效原则：提升体验舒适度；利于用户认知；自然流畅不拖沓

网页动画的十二原则

• 挤压和拉伸 (Squash and stretch)
• 预备动作 (Anticipation)
• 演出布局 (Staging)
• 连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose)
• 跟随和重叠动作 (Follow Through and Overlapping Action)
• 缓入缓出 (Slow In and Slow Out)
• 弧线运动 (Arc)
• 次要动作 (Secondary Action)
• 时间节奏 (Timing)
• 夸张手法 (Exaggeration)
• 扎实的描绘 (Solid drawing)
• 吸引力 (Appeal)

适当的动画可以增加页面的趣味性，也能提升浏览者的体验舒适感。

刚好最近有涉及到做动效的内容，简单分享一下自己做的动画效果，以下示例均为小程序场景下的内容，这里就只重点贴一下动效的相关片段代码了。

1、推荐模块入场动效

这里涉及两个模块的动效：

1）列表模块展开，简单的高度变化

/* 1、列表模块展开(简单的高度变化) */
.list-wrap {
  height: 106rpx;
  animation: aniOpenList 0.4s linear forwards;
}
@keyframes aniOpenList{
  0% {
    height: 106rpx;
  }
  to {
    height: 414rpx;
  }
}

2）列表内文字入场，由上到下依次入场，通过给每项设置不同的动画过渡时间来实现

<block wx:for="{{list}}" wx:key="index">
  <!-- 不同的 animation-duration 过渡时间，确保了每一列文字依次入场的间隔 -->
  <view class="list-item-text" style="animation-duration: {{0.2 + index * 0.1}}s;letter-spacing: {{10 + index * 5}}rpx;">
    {{item.content}}
  </view>
</block>

.list-item-text {
  animation: aniTextIn 0.2s ease-in-out 0.3s forwards;
  letter-spacing: 10rpx;
}
@keyframes aniTextIn {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(50rpx); // 列表入场的回弹效果
  }
  100% {
    letter-spacing: 0;
    transform: translateX(0);
  }
}

2、工具栏入场动效

跟列表文字入场的实现方式有些类似，也是通过设置不同的动画过渡时间来实现的。

<block wx:for="{{list}}" wx:key="index">
  <view class="tool-item" style="animation-duration: {{(index + 1) * 0.2}}s;transform: translateY({{(index + 1) * 3}}px);">
    {{item.content}}
  </view>
</block>

.tool-item {
  animation: move 0.2s ease-in-out forwards;
}
@keyframes move {
  50% {
    transform: translateY(-30rpx);  // 使工具入场的时候有一个反弹动作
  }
  100% {
    transform: translateY(0);
  }
}