抽奖动画中，如何实现流畅的视觉过渡效果？

本文共计3841个文字，预计阅读时间需要16分钟。

本文介绍一个轻量级动画库anime.js。anime.js是一款功能强大的JavaScript动画库插件。anime.js可以将CSS3属性、SVG、DOM元素和JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

本文介绍一个小型动画库anime.js，anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性，SVG，DOM 元素和JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。
anime.js虽然没有其他动画库功能强大，但是它包含的功完全能够满足日常活动类开发，并且它体积很小，压缩后的anime.min.js只有18kb。下面简单介绍aminie.js提供了哪些动画方法，并举例说明如何在项目中使用。

1. 基本概念 1.1 动画的目标对象

• 可使用任意CSS选择器作为动画目标，不能用伪元素。

anime({ targets: '.css-selector-demo .el', translateX: 250 })

• 使用DOM节点或节点的集合作为动画目标。

var elements = document.querySelectorAll('.dom-node-demo .el'); anime({ targets: elements, translateX: 270 });

• 以JavaScript对象作为动画目标，这个对象必须含有至少一个数字属性。