1、关于anime.js的引入

$ npm install animejs
# OR
$ bower install animejs

import anime from 'animejs'

或者直接引用anime.js文件

<!-- 本地下载引入js文件 -->
<script src="anime.min.js"></script>
<!-- CDN在线引入 -->
<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js" ></script>

2、简单DEMO

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简单DEMO</title><style>.demo{width: 200px;height: 200px;}</style></head><body><div class="demo">DEMO</div>           <script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js" ></script><script>const animationDemo = anime({targets: '.demo', backgroundColor: [{ value: "#5F9EA0", duration: 700 },{ value: "#3A5FCD", duration: 300 }],     fontSize: [{ value: "32px", duration: 700 },{ value: "64px", duration: 300 }],rotate: 360,borderRadius: 8,duration: 1000,loop: false,easing: 'easeInOutSine'})</script></body>
</html>

这是一个简单的demo，实现.demo这个div同时旋转360度，变色与字号变大的动画。当然，这个动画过于粗糙，非常难看，通过这个简单的例子讲一下anime.js的简单用法

首先调用动画的基本是anime()这个方法，在方法内进行配置即可实现一个简单动画

1.targets：实现动画的目标，可以是

css选择器如：'div','#el path';
DOM元素如： document.querySelector('.item')
节点列表如： document.querySelectorAll('.item')
对象
数组如：['div', '.item', domNode]

2.一些CSS属性

使用一些CSS属性值的设置即可实现动画，比如：

// value：属性值；duration：持续时间；delay：延迟时间
backgroundColor: [{ value: "#5F9EA0", duration: 700 },{ value: "#3A5FCD", duration: 300, delay: 1000}],

这个动画就是前0.7s背景色为“#5F9EA0”，1s时才将颜色开始变为“#3A5FCD”，持续0.3s。

很多属性都可以用，可以自己试试

3.rotate：旋转，后面是度数，当然你可以不写，默认为0

4.borderRadius：这个不需要解释了

5.duration：动画执行时间

6.loop：是否循环执行动画，默认是false

7.easing：动画执行函数，这个怎么说呢，就是动画在执行过程中不同阶段的不同执行速度

具体效果参看这个网站

选择右下角的值查看函数，有合适的的值的写法是easeIn、easeOut或者是easeInOut加上你选择的效果的值

3、相关学习文档

随便写了点，简单记录一下，深入了解查看文档

1.简书里的文档，我主要参考的就是这个

2.anime.js的github，里面有官方英文文档

3.官方网站

anime.js的学习小结相关推荐

JS高级技巧学习小结
安全类型检测 var isArray = value instanceof Array; 以上代码要返回true,value必须是一个数组,而且还必须与Array构造函数在同一个全局作用域中(Arra ...
【Anime.js】——JavaScript动画库：Anime.js——学习笔记
目录一.搭建开发环境二.基本功能和使用开始制作动画动画属性三.anime.stagger--交错动画四.timeline--时间轴五.控制.回调与助手一.控制二.回调三.助手六. ...
原生小程序学习小结，mpvue+mpvue-weui+fyl.js小程序项目搭建笔记
官方文档:https://developers.weixin.qq.... 学习小结: 1.小程序.订阅号及服务号都是在微信公众平台的体系下,但小程序本身与订阅号及服务号是完全独立的,需要重新注册: ...
【转载】Hyperledger学习小结
Hyperledger学习小结自学Hyperledger Composer也有段时间了,是时候对所学的知识总结一下了.因为没有实际项目参与的话,差不多也就到此为止了.后续可能会去了解一下以太坊的技术 ...
jquery on方法原理_jQuery 学习小结
jQuery 学习小结相较于原生 JS,jQuery 通过 API 接口写更少的代码,做更多的事情.虽然这个元老级别的技术库的使用率已经渐渐在减少了,不过了解其原理和用法还是很有用的. jQuery ...
JS / JQ 学习记录
<一起学前端之 JS 篇>是记录从 2020.4.29 开始,学习 JS 的收获与感悟. 2020.4.29 数据存储单位 JavaScript介绍 JS是什么运行在客户端的脚本语言, ...
【HTML5学习小结(1)】
HTML5学习小结了解Web 一.web网页 1.网页究竟是什么? 2.认识网页 3.构成网页的要素有哪些? 4.web页面的组成. 二.web标准 1.结构标准 2.样式标准 3.行为标准二.H ...
js基础day01小结
第02阶段.前端基本功.前端基础.入门语法计算机知识补充学习目标理解简单了解计算机组成认识计算机内存一. 核心内容 1. 计算机组成 1.1 软件(程序) 系统软件:Windows.Lin ...
JavaScript动画库：Anime.js
前言今天简单学习一下JavaScript动画库:Anime.js.官网的介绍是: Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的JavaScript 动画库, 拥有简单而强大的API. ...
Python - 输出格式 (学习小结)
Python - 输出格式 (学习小结) Bu.xing 利用现代手段,创建学习家园关注他 1 人赞同了该文章 Python 输出格式我们常说的输出格式分两种含义: # 一种是指数据在屏幕上的显 ...

anime.js的学习小结

1、关于anime.js的引入

2、简单DEMO

3、相关学习文档

anime.js的学习小结相关推荐

最新文章

热门文章