前端动画大乱炖

一分钟入门 to2to 使用

通过 npm 安装或者 cdn 下载下来在 HTML 引用该脚本:

npm i to2to

使用:

import To from 'to2to'

const ele = document.querySelector('#animateEle')

To.get({ rotate: 0, x: 0, y: 0 })
    .to({ rotate: 720, x: 200, y: 200 }, 1600, To.easing.elasticInOut)
    .progress(function () {
        ele.style.transform = `translate(${this.x}px, ${this.y}px) rotate(${this.rotate}deg)`
    })
    .start()

Rect

const rect = new cax.Rect(200, 100, {
  fillStyle: 'black'
})

作为一只前端狗,我们的使命就是在满足产品需求、实现交互设计的基础上,将最好的体验呈现给用户爸爸们。在保证性能的同时,我们通常会给页面加一些动态效果,以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结,以求温故而知新,如有不当还望多多指正。

自定义动画

通过 animate 方法可以使用自定义的动画:

const stage = new cax.Stage(300, 400, 'body')
const bitmap = new cax.Bitmap('./wepay-diy.jpg', function () {
    var eio = To.easing.elasticInOut
    To.get(bitmap).animate('rubber').start()
})

bitmap.x = 150
bitmap.y = 200
bitmap.originX = 40
bitmap.originY = 40
stage.add(bitmap)

cax.setInterval(() => {
    stage.update()
}, 16)

to2to 内置了少数几个自定义动画

  • rubber
  • bounceIn
  • flipInX
  • zoomOut

Transform

属性名 描述
x 水平偏移
y 竖直偏移
scaleX 水平缩放
scaleY 竖直缩放
rotation 旋转
skewX 歪斜 X
skewY 歪斜 Y
originX 旋转基点 X
originY 旋转基点 Y

童年.png

简单轻量跨平台的 Javascript 运动引擎

一分钟入门小游戏 cax 使用

到 GitHub 下载 cax 小游戏示例,目录结构和运行效果如下:

图片 1

const stage = new cax.Stage()

和小程序以及 Web 不同的是,小游戏创建 Stage 不需要传任何参数。

几个常用的动画库

Ani.js -- 基于CSS动画的生命处理库
Dynamics.js -- 创建具有物理运动效果动画的js库
Animate.css -- 齐全的CSS3动画库
Three.js -- 让用户通过javascript入手进入搭建webgl项目的类库

在 cax 中使用 to2to

cax 内置了 to 的能力以连缀的方式写运动效果:

const easing = cax.To.easing.elasticInOut

cax.To.get(bitmap)
    .to({ y: 340, rotation: 240 }, 2000, easing)
    .begin(() => {
        console.log("Task one has began!")
    })
    .progress(() => {
        console.log("Task one is progressing!")
    })
    .end(() => {
        console.log("Task one has completed!")
    })
    .wait(500)
    .to()
    .rotation(0, 1400, easing)
    .begin(() => {
        console.log("Task two has began!")
    })
    .progress(() => {
        console.log("Task two is progressing!")
    })
    .end(() => {
        console.log("Task two has completed!")
    })
    .start();
  • toto 之间的是并行
  • towait 之前的是串行
  • toto 之间的 与 下一个 toto 之间的是串行

有点绕,但是很直观,慢慢体会。

如果想要循环播放的话可以使用 cycle 方法:

cax.To.get(bitmap)
    .to()
    .y(340, 2000, cax.easing.elasticInOut)
    .to
    .y(0, 2000, cax.easing.elasticInOut)
    .cycle()
    .start()

运动演示地址

Text

文本对象

const text = new cax.Text('Hello World', {
  font: '20px Arial',
  color: '#ff7700',
  baseline: 'top'
})

WebGL

WebGL使得网页在支持HTML <canvas>标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。 WebGL 程序由JavaScript的控制代码,和在计算机的图形处理单元(GPU)中执行的特效代码(shader code,渲染代码) 组成。

图片 2

WebGL.png

WebGL 本质上是基于光栅化的 API,而不是基于 3D 的 API。WebGL 只关注两个方面,即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影矩阵的坐标,片段着色器可以提供投影矩阵的颜色。

由于WebGL的体系比较庞大,三言两语说不完,所以以下仅提供各种传送门了(不许说我懒!!):
WebGL 参考资料
WebGL API

谁在使用?

图片 3 图片 4

内置对象

Animation

类似的CSS还提供了一个Animation属性,不过区别于Transition,Animation作用于元素本身而不是样式属性,可以使用关键帧的概念,应该说可以实现更自由的动画效果。

to2to 中文念 '兔兔兔',作为 cax 内置的运动套件独立出一个package ,因为它本身可以和平台环境运动对象无关。既可运动 dom,也可运动 cax 内置对象,也可运动对象子面量。众所周知,运动需要循环的 tick 去不断执行偏移函数,小程序,小游戏和web各浏览器的 相应的 API 还是有差异,to2to 抹平了这些差异,让你使用同样的api可以在不同环境畅快运动。

一分钟入门小程序 cax 使用

到 GitHub 下载 cax 自定义组件,然后小程序引入 cax 自定义组件:

└── cax
    ├── cax.js
    ├── cax.json  
    ├── cax.wxml  
    ├── cax.wxss
    └── index.js

在 page 或者 component 里声明依赖:

{
  "usingComponents": {
    "cax":"../cax/cax"
  }
}

在的 wxml 里引入 cax 标签:

<cax id="myCanvas"></cax>

在 js 里渲染逻辑:

import cax from '../cax/index'

Page({
  onLoad: function () {
    //比 web 里使用 cax 多传递 this,this 代表 Page 或 Component 的实例
    const stage = new cax.Stage(200, 200, 'myCanvas', this)
    const rect = new cax.Rect(100, 100, {
      fillStyle: 'black'
    })

    rect.originX = 50
    rect.originY = 50
    rect.x = 100
    rect.y = 100
    rect.rotation = 30

    rect.on('tap', () => {
      console.log('tap')
    })

    stage.add(rect)
    stage.update()
  }
})

效果如下所示:

图片 5

除了 tap 事件,也可以帮 rect 绑定其他触摸事件:

rect.on('touchstart', () => {
  console.log('touchstart')
})

rect.on('touchmove', () => {
  console.log('touchmove')
})

rect.on('touchend', () => {
  console.log('touchend')
})

图片 6

特性

  • 超轻量级的代码体积
  • 支持周期运动
  • 支持并行与串行运动
  • 运动一切(Canvas、DOM、WebGL、SVG、Object..)
  • 支持小程序、小游戏以及 Web 浏览器用相同简介的 API 运动

Shape

与 Graphics 不同的是, Shape 一般拥有有限的宽高,所以可以使用离屏 Canvas 进行缓存。下面这些属于 Shape。

语法

animation: name duration timing-function delay iteration-count direction;

具体属性值介绍如下:

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。(keyframename、none)
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。 (normal、alternate)

DEMO传送门

  • Github →
  • Simple DEMO
  • Animation DEMO
  • Clip Transform Animation DEMO
  • Animate DEMO
  • Swing DEMO

属性

Canvas

<canvas>是HTML5新增的元素,作为页面图形绘制的容器,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染,Canvas具有如下特点:

  • 依赖分辨率,基于位图;
  • 不支持事件处理器;
  • 弱的文本渲染能力;
  • 能够以 .png 或 .jpg 格式保存结果图像;
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘;

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。Canvas API也使用了路径的表示法。但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath()arc() 方法。一旦定义了路径,其他的方法,如 fill(),都是对此路径操作。

DEMO传送门

扩展自定义动画

内置的不够用?自己动手丰衣足食:

比如 customAnimation 就是通过下面实现的:

To.extend('customAnimation', [['to', ['scaleX', {
  '0': 0,
  '1': 400,
  '2': To.easing.elasticInOut
}], ['scaleY', {
  '0': 0,
  '1': 400
}]]])  

索引为 2 的 easing 可以传可不传,不传代表线性匀速变化。

使用刚刚定义的自定义动画:

To.get(obj).animate('customAnimation').start()

Bitmap

const bitmap = new cax.Bitmap(img)
stage.add(bitmap)
stage.update()

如果只传 url 而不是 Image 对象的实例,需要这样:

const bitmap = new cax.Bitmap('./wepay.png', ()=>{
  stage.update()
})
stage.add(bitmap)

这里需要注意小程序需要配置 downloadFile 需要配置合法域名才能正常加载到图片。

可以设置图片裁剪显示区域,和其他 transform 属性:

bitmap.rect = [0, 0, 170, 140]
bitmap.x = 200

Transition

CSS 中的 transition 属性允许块级元素中的属性在指定的时间内平滑的改变,简单看下其语法规则:

transition: property duration timing-function delay;

具体属性值介绍如下:

描述
transition-property 规定设置过渡效果的 CSS 属性的名称。(none / all / property)
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。(linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n))
transition-delay 定义过渡效果何时开始。

DEMO传送门

License

MIT

自定义对象

SVG

SVG是英文Scalable Vector Graphics的缩写,意为可缩放矢量图形,用来定义用于网络的基于矢量的图形,其使用 XML 格式定义图像,并且具有如下特点:

  • 不依赖分辨率,基于矢量图;
  • 支持事件处理器;
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图);
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快);
  • 不适合游戏应用;

来看一个简单的示例,用SVG画了一个圆:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。widthheight 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cxcy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r属性定义圆的半径。

下面主要是介绍SVG中的几个用于动画的元素,它们分别是:

<animate>:通常放置到一个SVG图像元素里面,用来定义这个图像元素的某个属性的动画变化过程;
<animateMotion>:元素也是放置一个图像元素里面,它可以引用一个事先定义好的动画路径,让图像元素按路径定义的方式运动;
<animateTransform>:元素对图形的运动和变换有更多的控制,它可以指定图形的变换、缩放、旋转和扭曲等;
<mpath>:元素的用法在上面的例子里出现过,它是一个辅助元素,通过它,<animateMotion>等元素可以引用一个外部的定义的<path>。让图像元素按这个<path>轨迹运动;

DEMO传送门

事件

实现方式

通常我们在前端实现动画效果的几种主要实现方式如下:

  • JavaScript:通过定时器(setTimeout 和 setIterval)来间隔来改变元素样式,或者使用requestAnimationFrame;
  • CSS3:transition 和 animation;
  • HTML5:使用HTML5提供的绘图方式(canvas、svg、webgl);

图片 7

Animations.png

Button

const button = new cax.Button({
  width: 100,
  height: 40,
  text: "Click Me!"
})

几个基本概念

简单介绍几个关于动画的基本概念:

:在动画过程中,每一幅静止画面即为一“帧”;
帧率:即每秒钟播放的静止画面的数量,单位是fps(Frame per second)或赫兹(Hz);
帧时长:即每一幅静止画面的停留时间,单位一般是ms(毫秒);
丢帧:在帧率固定的动画中,某一帧的时长远高于平均帧时长,导致其后续数帧被挤压而丢失的现象;

我们在显示器上看到的动画,每一帧变化都是系统绘制出来的(GPU或者CPU)。它的最高绘制频率受限于显示器的刷新频率(而非显卡,大多数是60Hz或者75Hz)。

帧频越高,屏幕上图片闪烁感就越小,稳定性也就越高。人的眼睛不容易察觉75Hz以上刷新频率带来的闪烁感。

自定义 Shape

自定义 Shape 继承自 cax.Shape:

class Sector extends cax.Shape {
  constructor (r, from, to, option) {
    super()

    this.option = option || {}
    this.r = r
    this.from = from
    this.to = to
  }

  draw () {
    this.beginPath()
      .moveTo(0, 0)
      .arc(0, 0, this.r, this.from, this.to)
      .closePath()
      .fillStyle(this.option.fillStyle)
      .fill()
      .strokeStyle(this.option.strokeStyle)
      .lineWidth(this.option.lineWidth)
      .stroke()
  }
}

使用 Shape:

const sector = new Sector(10, 0, Math.PI/6, {
  fillStyle: 'red'
  lineWidth: 2
})
stage.add(sector)
stage.update()

requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘

设置这个API的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。代码中使用这个API,就是告诉浏览器希望执行一个动画,让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用,由于功效只是一次性的,所以想实现连续的动效,需要递归调用,示例如下:

<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;"></div>

<script>
var demo = document.getElementById('demo');
function render(){
    demo.style.left = parseInt(demo.style.left)   1   'px'; //每一帧向右移动1px
}
requestAnimationFrame(function(){
    render();
    //当超过300px后才停止
    if(parseInt(demo.style.left) <= 300) requestAnimationFrame(arguments.callee);
});
</script>

cancelAnimationFrame方法用于取消重绘:

var requestID = requestAnimationFrame(repeatOften);
cancelAnimationFrame(requestID);

使用requestAnimationFrameAPI的优势如下:

  • 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随显示器的刷新频率(60 Hz或者75 Hz);
  • 在隐藏或不可见的元素中,将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量;

目前,主要浏览器Firefox 23 / IE 10 / Chrome / Safari)都支持这个方法。可以用下面的方法,检查浏览器是否支持这个API。如果不支持,则自行模拟部署该方法。

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.oRequestAnimationFrame || 
          window.msRequestAnimationFrame || 
          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

所以,可以这么说,requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout,不同的是requestAnimationFrame不是自己指定回调函数运行的时间,而是跟着浏览器内建的刷新频率来执行回调,这当然就能达到浏览器所能实现动画的最佳效果了。

DEMO传送门

特性

  • Learn Once, Write Anywhere(小程序、小游戏、PC Web、Mobile Web)
  • 支持小程序、小游戏以及 Web 浏览器渲染
  • 小程序、小游戏和 Web 拥有相同简洁轻巧的 API
  • 高性能的渲染架构
  • 超轻量级的代码体积
  • 松耦合的渲染架构
  • 支持 Canvas 元素管理
  • 支持 Canvas 元素事件体系
  • 图灵完毕的 group 嵌套体系
  • 内置 tween 运动能力
  • 内置文本、位图、序列帧、绘图对象和多种矢量绘制对象

  • 一分钟入门小程序 cax 使用
  • 一分钟入门小游戏 cax 使用
  • 一分钟入门 Web cax 使用
  • 内置对象
    • Group
    • Bitmap
    • Sprite
    • Text
    • Graphics
    • Shape
      • Rect
      • Circel
      • Ellipse
    • Element
      • Button
  • 属性
    • Transform
    • Alpha
    • CompositeOperation
    • Cursor
  • 事件
    • 小程序事件
    • Web 事件
  • 自定义对象
    • 自定义 Shape
    • 自定义 Element
  • License

动画即童年

动画是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。-- 维基百科

以上是维基百科上给出的动画的定义。相信每一个像我这样有童年的孩子,应该都玩过手翻书,或者就算你的童年稍微暗淡一点,应该也看过动画片吧...嗯嗯,并没有跑题,其实这和我们今天提及的动画本质上是一样的,只不过就是呈现方式或者说载体发生了改变。

图片 8

超人大战赛亚人.avi

Web 事件

事件名 描述
click 元素上发生点击时触发
mousedown 当元素上按下鼠标按钮时触发
mousemove 当鼠标指针移动到元素上时触发
mouseup 当在元素上释放鼠标按钮时触发
mouseover 当鼠标指针移动到元素上时触发
mouseout 当鼠标指针移出元素时触发
tap 手指触摸后马上离开
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchend 手指触摸动作结束
drag 拖拽

Group

用于分组, group 也可以嵌套 group,父容器的属性会叠加在子属性上, 比如:

  • group 的 x 是 100, group 里的 bitmap 的 x 是 200, 最后 bitmap 渲染到 stage 上的 x 是 300
  • group 的 alpha 是 0.7, group 里的 bitmap 的 alpha 是 0.6, 最后 bitmap 渲染到 stage 上的 alpha 是 0.42
const group = new cax.Group()
const rect = new cax.Rect(100, 100 {
  fillStyle: 'black'
})
group.add(rect)
stage.add(group)
stage.update()

group 拥有常用的 add 和 remove 方法进行元素的增加和删除。先 add 的会先绘制,所有后 add 的会盖在先 add 的上面。

Sprite

序列帧动画组件,可以把任意图片的任意区域组合成一串动画。

const sprite = new cax.Sprite({
    framerate: 7,
    imgs: ['./mario-sheet.png'],
    frames: [
        // x, y, width, height, originX, originY ,imageIndex
        [0, 0, 32, 32],
        [32 * 1, 0, 32, 32],
        [32 * 2, 0, 32, 32],
        [32 * 3, 0, 32, 32],
        [32 * 4, 0, 32, 32],
        [32 * 5, 0, 32, 32],
        [32 * 6, 0, 32, 32],
        [32 * 7, 0, 32, 32],
        [32 * 8, 0, 32, 32],
        [32 * 9, 0, 32, 32],
        [32 * 10, 0, 32, 32],
        [32 * 11, 0, 32, 32],
        [32 * 12, 0, 32, 32],
        [32 * 13, 0, 32, 32],
        [32 * 14, 0, 32, 32]
    ],
    animations: {
        walk: {
            frames: [0, 1]
        },
        happy: {
            frames: [5, 6, 7, 8, 9]
        },
        win: {
            frames: [12]
        }
    },
    playOnce: false,
    currentAnimation: "walk",
    animationEnd: function () {

    }
});

compositeOperation

属性名 描述
compositeOperation 源图像绘制到目标图像上的叠加模式

注意这里如果自身没有定义 compositeOperation 会进行向上查找,找到最近的定义了 compositeOperation 的父容器作为自己的 compositeOperation。

License

MIT

Cursor

属性名 描述
cursor 鼠标移上去的形状

一分钟入门 Web cax 使用

通过 npm 或者 CDN 获取:

npm i cax
import cax from 'cax'

const stage = new cax.Stage(200, 200, '#renderTo')
const rect = new cax.Rect(100, 100, {
  fillStyle: 'black'
})

stage.add(rect)
stage.update()

除了 Stage 构造函数比小程序第四个参数 this,其他使用方式都一样。

Circel

const circel = new cax.Circel(10)

自定义 Element

自定义 Element 继承自 cax.Group:

class Button extends cax.Group {
  constructor (option) {
    super()
    this.width = option.width
    this.roundedRect = new  cax.RoundedRect(option.width, option.height, option.r)
    this.text = new cax.Text(option.text, {
      font: option.font,
      color: option.color
    })

    this.text.x = option.width / 2 - this.text.getWidth() / 2 * this.text.scaleX
    this.text.y = option.height / 2 - 10   5 * this.text.scaleY
    this.add(this.roundedRect, this.text)
  }
}

export default Button

使用:

const button = new cax.Button({
  width: 100,
  height: 40,
  text: "Click Me!"
})

一般情况下,稍微复杂组合体都建议使用继承自 Group,这样利于扩展也方便管理自身内部的元件。
可以看到小游戏的 DEMO 里的 Player、Bullet、Enemy、Background 全都是继承自 Group。

Ellipse

const ellipse = new cax.Ellipse(10)

注意:从技术上小游戏和 Web 可以离屏 Canvas,小程序不行,因为小程序不支持动态创建离屏 Canvas。

Element

Element 是多种元素的组合,如 Bitmap、Group、 Text、 Shape 等混合起来的图像。

Alpha

属性名 描述
alpha 元素的透明度

注意这里父子都设置了 alpha 会进行乘法叠加。

小程序事件

事件名 描述
tap 手指触摸后马上离开
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchend 手指触摸动作结束
drag 拖拽

Graphics

绘图对象,用于使用基本的连缀方式的 Canvas 指令绘制图形。

const graphics = new cax.Graphics()
graphics
    .beginPath()
    .arc(0, 0, 10, 0, Math.PI * 2)
    .closePath()
    .fillStyle('#f4862c')
    .fill()
    .strokeStyle('black')
    .stroke()

graphics.x = 100
graphics.y = 200

stage.add(graphics)

Cax

小程序、小游戏以及 Web 通用 Canvas 渲染引擎

  • Github →
  • 点我看看 DEMO
  • 小程序 DEMO 正在审核中敬请期待
  • 小游戏 DEMO 正在审核中敬请期待

本文由上海时时乐走势图发布于web前端,转载请注明出处:前端动画大乱炖

您可能还会对下面的文章感兴趣: