css animation 与 小程序 animation 在API写法上的一些对比

Yoram
603 阅读10分钟

动画 Animation 介绍

动画实际是以某个频率变化的很多张图片，因人眼的视觉暂留效应，造成图画或作品活动的作品或技术。[1]

人眼实际的视觉暂留约是1/16 秒

一些概念

帧 （Frame）：视频或动画中的每一张图画。

帧数 （Frames）：一段时间内的画面数量。

帧率 （Frame Rate）：

  • 帧率(Frame rate) = 帧数(Frames)/时间(Time)，单位为帧每秒(f/s, frames per second, fps)
  • 帧率是用于测量显示帧数的量度，测量单位为“每秒显示帧数”（ Frame per Second，FPS）或“赫兹”（ Hz），一般来说 FPS 用于描述视频、电子绘图或游戏每秒播放多少帧。

FPS （Frame per Second 每秒显示帧数）：每秒显示的帧数。

截至目前，大部分电影依然是24帧，但我们看起来依然是非常流畅。比电子游戏更流畅是因为摄影技术可以记录运动中的动态模糊和人眼类似，这样就有顺畅的过渡，而游戏每帧都是生成的画面所以需要提高帧率以弥补流畅性。

刷新率（ Refresh rate ） ： 刷新率具体是指显示器实际显示的帧数，有可能接受的数据源帧数是120帧，但实际显示器可能显示60 帧（目前主流显示器刷新率为60Hz）。

逐帧动画（ Stop motion animation ）

定格动画，又名逐帧动画（帧动画），是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。

补间动画（tween animation）

补间动画是动画的基础形式之一，指的是人为设定动画的关键状态，也就是关键帧，而关键帧之间的过渡过程只需要由计算机处理渲染的一种动画形式。

在前端领域，除了CSS3 animation默认可设置为补间动画外，CSS transition、SVG 动画、TweenJS 都是可以实现补间动画效果的。

codepen.io/Tiylor/embe…

CSS3 Animation

执行阶段

css animation动画分为 初始状态 等待期 动画执行期 完成期 四个阶段

  • 初始状态：元素的原始状态
  • 等待期 ：animation-delay 设置的延迟期间
  • 动画执行期：delay 结束瞬间开始执行动画，一直持续到最后一帧。
  • 完成期：执行完最后一帧时，元素处于的状态

属性介绍

animation 简写顺序（非严格）, 下面是完整到常用的简写顺序，省略的属性将使用默认值。

/* @keyframes duration | easing-function | delay | iteration-count
  | direction          | fill-mode       | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes name | duration | easing-function | delay 【最常用的写法】*/   
animation: slidein 3s linear 1s;   

/* @keyframes name | duration 【常用】*/
animation: slidein 3s;

css animation

  1. animation-name， 属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
  2. animation-duration, 属性指定一个动画周期的时长
  3. animation-timing-function， 见详解
  4. animation-delay，动画开启前的延迟时间
  5. animation-iteration-count，动画在结束前运行的次数，可以为小数，infinite表示循环
  6. animation-direction，见详解
  7. animation-fill-mode 见详解
  8. animation-play-state 见详解

属性的一个简写属性形式。

animation-timing-function

缓动函数：实际是动画速度的变化的函数（贝塞尔曲线跟类似于x-t图像），通常数学模型用Tween算法和贝塞尔曲线 来实现。

在css animation中，此属性有四种value写法，默认动画为补间动画。

/* Keyword values */
/* 预设缓动函数可选值：linear、ease、ease-in、ease-out、ease-in-out、step-start、tep-end */
animation-timing-function: ease;

/* Function values */
/* steps函数的第二个参数可选值:jump-start、jump-end、jump-none、jump-both、end、start */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /*通过贝塞尔曲线手动指定缓动函数*/
animation-timing-function: steps(4, end); /*通过阶梯函数实现非连续的定格动画（逐帧动画）效果*/

/* Multiple animations */
/* 注：step-start 同 steps(1, start) */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
/* 可选值: inhert、initial、revert、revert-layer、unset */
animation-timing-function: inherit;

缓动函数示例参考网站1：easings.net/cn#

codepen.io/Tiylor/embe…

animation-direction

四个可选值 normal reverse alternate alternate-reverse

意思分别是默认顺序（A-B） 、 逆序（B-A）、交替（A-B）（B-A）、反向交替（B-A）（A-B）

codepen.io/Tiylor/embe…

animation-fill-mode

设置 CSS 动画在执行之前和之后如何将样式应用于其目标。也就是动画结束时的帧应用到元素的规则。

  • none 动画结束，恢复为原始样式
  • forwards 动画结束，元素应用结束关键帧样式
  • backwards 动画开始前的等待期，元素应用动画的第一个关键帧样式。
  • both 兼具forwards和backwards的特点

注：由于animationo-direction和animation-iteration-count的影响，第一帧和最后一帧会不同，如animationo-direction为reverse时，第一帧为100%或to，最后一帧为0%或from。当animation-iteration-count=3且animationo-direction为alternate时，假设frames为A->B，实际就是A->B B->A A->B。

animation-play-state

属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

codepen.io/Tiylor/embe…

补充：animation中step函数实现逐帧动画的示例

原素材是一张雪碧图，最好及常见的情况是每秒24帧切换，在部分早期或现在安卓手机的开机动画常用此方法实现定格动画（逐帧动画）。具体设置参数见MDN及参考10。

codepen.io/Tiylor/embe…

CSS3 animation 支持的变化的元素css属性列表

见developer.mozilla.org/en-US/docs/…

注：display在animation和transition中都不支持，暂时可用visibility代替。

如何启动动画、配置多个动画？

如何启动动画？

  • 添加动画属性的元素初次渲染
  • 已经渲染的元素添加动画类名
  • 已经渲染的元素添加style内联动画样式

css animation一组动画就是一个完整的animation定义，当配置多个动画时，不会顺序执行所有动画，也不会同时复合执行动画效果，只能通过后一个动画延迟上一个动画的执行时间来做到顺序执行动画，当没有延迟时间时，默认只执行最后一个动画。见下方示例：

codepen.io/Tiylor/embe…

了解下animation-css的动画分类

动画源于自然的过渡与变化，animation-css对这种常见的变化效果做了一些分类。

具体见animate.style/

  1. 引人注目类动画（Attention seekers）
  2. 空间上从后面出现的动画 （back）
    1. 向后然后离开的动画
  1. 回弹性出现的动画、（bounce）
    1. 回弹性消失的动画
  1. 渐入动画（渐渐出现）（fade）
    1. 渐出动画（渐渐消失）
  1. 翻转动画（flip）
  2. 光速滑动出现消失动画（lightspeed）
  3. 旋转出现动画、（rotate）
    1. 旋转消失动画
  1. 特殊动画（spacials）
  2. 放大出现、（zoom）
    1. 缩小消失动画
  1. 滑动出现动画与滑动消失动画（slide）

了解下quasar-UI库 animation有哪些

因为quasar-animation是借鉴自animation的，但也有一些原创的animation，列在下方

具体见

github.com/quasarframe…

写一个常用css-animation 的集合

[class*=animation-]{
  transition: all 0.3s; 
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.animation-fade{
  animation-name: fade;
  animation-duration: .24s;
  animation-timing-function: ease-in-out;
}
.animation-fade-in{
  animation-duration: .2s;
  animation-name: fade-in;
}
.animation-fade-out{
  animation-duration: .2s;
  animation-name: fade-out;
}
.animation-slide-in-up{
  animation-duration: .2s;
  animation-name: slide-in-up;
}
.animation-slide-in-down{
  animation-duration: .2s;
  animation-name: slide-in-down;
}
@keyframes fade{
  0%{
    opacity: 0;
    transform: scale(.2);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fade-out{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes slide-in-up{
  0%{
    transform: translate3d(0, 100%, 0);
  }
  100%{
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-in-down{
  0%{
    transform: translate3d(0, -100%, 0);
  }
  100%{
    transform: translate3d(0, 0, 0);
  }
}

如何使用和扩展这个animation合集?

在需要的元素上直接写类名即可，animation-fade-in ，这里约定animation是动画类名前缀，fade-in为写好的动画名，后续以此为约定添加即可，用的地方直接使用即可。

小程序 动画 API

小程序也是支持css3 animation的，小程序动画API本质还是css3 animation（通过style的形式），但是以js的方式来控制的, 更方便于编程式的控制，原生css animation性能要比它更好。

小程序自身有两个动画API，一个是wx.createAnimation（更小的js式的animation）, 另外一个是this.animation（官方也叫关键帧动画）

wx.createAnimation 只支持简单的配置，用于创建一个animation对象

  • duration
  • timingFunction 目前小程序仍不支持自定义cubic-bezier曲线，缓动函数仅支持8种预设。
  • delay
  • transformOrigin

支持变化的元素css属性没有原生多，可通过.xx链式形式书写，具体列表参见developers.weixin.qq.com/miniprogram…

每个完整的动画触发都需要进行以下完整阶段

// 1. 创建animation对象
const animation = wx.createAnimation({
  duration: 2000, //每组动画所用的时间
  timingFunction: 'ease',
  animationFillMode: 'none'
});
//2.通过.xx链式调用进行多个同时变化的动画定义，用step()定义同时期的一组动画
//  多个step就是多组动画，将依次执行动画。
animation.scale(2, 2).rotate(45).step();//默认使用上面的公共配置，时间2s
animation.opacity(0).scale(0).step({duration: 4000});//局部覆盖公共，时间4s
// 3.使用export方法导出当前动画，并将值赋给元素的animation属性
this.setData({
  animationData: animation.export()
});
//共耗时6s

<view class="box" animation="{{animationData}}"></view>
<view class="button" bindtap="setupAnimation">启动动画</view>

注意：

  • 由于没有css animation的infinite，所以无法循环播放。
  • 默认动画执行完是保持最后一帧的状态。
  • 而再次触发同样的动画，对于元素是无效的，是因为小程序判断是否要有动画效果是看当前状态和要执行的实例数据间是否有差值，所以需要重置到初始状态才可以再次触发，如小程序转盘场景，需要每次转动后，再次立刻转回初始角度。

上述看起来，animation指定了每一组动画设置，但step函数支持object来修改当前这一组的动画属性，如，让上述第二个动画执行4s。

// 1. 创建animation对象
const animation = wx.createAnimation({
  duration: 2000, //每组动画所用的时间
  timingFunction: 'ease',
  animationFillMode: 'none'
});
//2.通过.xx链式调用进行多个同时变化的动画定义，用step()定义同时期的一组动画
animation.scale(2, 2).rotate(45).step();
animation.opacity(0).scale(0).step({
  duration: 4000, //单个动画所用的时间
});
// 3.使用export方法导出当前动画，并将值赋给元素的animation属性
this.setData({
  animationData: animation.export()
});

小程序示例代码：

developers.weixin.qq.com/s/BrXKyBmN7…

留个问题：小程序怎样可以在动画执行完回到初始状态呢？

答：目前没有直接清除的方法，只能再执行一遍动画，可以逆向推导属性变化，或将涉及的属性都设为初值或默认值。

参考

  1. wikipedia-视觉暂留
  2. 转：显示技术中的帧、帧数、帧率、 FPS - 夜行过客 - 博客园
  3. Beginner’s Guide To Frame Rates For Every Type of Video
  4. 为什么游戏流畅需要60帧，而电影流畅只需要24帧？_AI悦创的技术博客_51CTO博客
  5. wikipedia-动态模糊
  6. CSS3 animation属性中的steps功能符深入介绍 « 张鑫旭-鑫空间-鑫生活
  7. CSS3 animation-timing-function 属性 | 菜鸟教程
  8. animation-timing-function - CSS: Cascading Style Sheets | MDN
  9. 逐帧动画和关键帧动画
  10. CSS3动画之逐帧动画-JELLY DESIGN | 京东零售官方设计共享平台
  11. CSS3动画之补间动画-JELLY DESIGN | 京东零售官方设计共享平台
  12. CSS3第十三课： steps animation逐帧动画，你不应该错过的最详篇！_CSS教程_一半设计一半前端
  13. 补间动画_百度百科
  14. 如何理解animation-fill-mode及其使用？ - SegmentFault 思否
  15. Animation | 微信开放文档
  16. 小程序动画加载只执行一次的问题_liujiawei159的博客-CSDN博客
  17. 小程序与动画的故事
  18. Using CSS animations - CSS: Cascading Style Sheets | MDN
  19. AnimationEvent - Web APIs | MDN
  20. www.martinrgb.com/MTGuideline…
  21. easings.net/cn#
avatar
文章
阅读
粉丝