CANVAS-ANIMATION

Canvas 实现 Animate.css 的动画效果。

在线体验地址：https://demo.money-into.com/canvas-animation/

在线体验地址2：http://animation.money-into.com

效果展示

功能列表

Attention seekers

• bounce
• flash
• pulse
• rubberBand
• shakeX
• shakeY
• headShake
• swing
• tada
• wobble
• jello
• heartBeat

Back entrances

• backInDown
• backInLeft
• backInRight
• backInUp

Back exits

• backOutDown
• backOutLeft
• backOutRight
• backOutUp

Bouncing entrances

• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp

Bouncing exits

• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp

Fading entrances

• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeInTopLeft
• fadeInTopRight
• fadeInBottomLeft
• fadeInBottomRight

Fading exits

• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• fadeOutTopLeft
• fadeOutTopRight
• fadeOutBottomRight
• fadeOutBottomLeft

Flippers

• flip
• flipInX
• flipInY
• flipOutX
• flipOutY

Lightspeed

• lightSpeedInRight
• lightSpeedInLeft
• lightSpeedOutRight
• lightSpeedOutLeft

Rotating entrances

• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight

Rotating exits

• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight

Specials

• hinge
• jackInTheBox
• rollIn
• rollOut

Zooming entrances

• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp

Zooming exits

• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp

Sliding entrances

• slideInDown
• slideInLeft
• slideInRight
• slideInUp

Sliding exits

• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

问题

• 绕轴旋转实现问题
• 旋转中心点 目前固定为矩形中心
• 缩放 缺少z轴方向的
• 动画时间 cubic-bezier ease-in-out