animejs 动画库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- <link
rel="stylesheet"
href="https://unpkg.com/swiper@4.4.6/dist/css/swiper.min.css"
/> -->
<title>Document</title>
<style>
.target {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="app"><div class="target"></div></div>
<script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
<!-- <script src="https://unpkg.com/swiper@4.4.6/dist/js/swiper.min.js"></script> -->
<script>
new Vue({
el: '#app',
data() {
return {};
},
mounted() {
// 为每种属性提供特定的动画参数 https://animejs.com/documentation/#specificPropParameters
// 为动画的每个目标和属性获取不同的值 https://animejs.com/documentation/#functionBasedParameters
// 添加，减去或乘以原始值。 https://animejs.com/documentation/#relativeValues
// 帧动画 https://animejs.com/documentation/#animationKeyframes
// 播放/暂停 https://animejs.com/documentation/#playPause
// 回调函数,监听动画周期 https://animejs.com/documentation/#update
var playPauseAnim = anime({
targets: '.target',
autoplay: true, // 定义动画是否应自动启动。
// translateX: 250,
// translateX: [-20, 20], // 强制动画以指定值开始。 [from, to]
translateX: [
{ value: -20, duration: 0 },
{ value: 0, duration: 1000 },
{ value: 20, duration: 1000, delay: 2000 },
],
opacity: [
{ value: 0, duration: 0 },
{ value: 1, duration: 1000 },
{ value: 0, duration: 1000, delay: 2000 },
],
duration: 3000, // 动画的持续时间（以毫秒为单位）
delay: 1000, // 动画的延迟（以毫秒为单位）
// endDelay: 1000, // 动画结束时以毫秒为单位添加一些额外时间
easing: 'linear', // 和css一样的动画曲线 https://animejs.com/documentation/#linearEasing
// direction: 'alternate', // 定义动画的方向。 https://animejs.com/documentation/#direction
loop: true, // 定义动画的迭代次数。
// innerHTML: [0, 10000],
// round: 10, // 将值向上舍入为x小数。
//每帧都会触发回调，包括延迟时
update: function() {
// console.log('update');
},
begin: function(anim) {
console.log('begin');
},
// 每次循环开始时都会触发一次loopBegin
loopBegin() {
console.log('loopBegin');
},
// 每次动画开始更改时都会触发changeBegin
changeBegin: function(anim) {
console.log('changeBegin');
},
//每次循环完成时都会触发一次loopComplete
loopComplete: function(anim) {
console.log('loopComplete');
},
// 每次动画停止更改时都会触发changeComplete
changeComplete: function(anim) {
console.log('changeComplete');
},
// 在延迟之后触发
change: function() {
console.log('change');
},
complete: function(anim) {
console.log('结束');
},
});
},
methods: {},
});
</script>
</body>
</html>
animejs 动画库的更多相关文章
- 2018年值得关注的10大JavaScript动画库
2018年值得关注的10大JavaScript动画库 旭日云中竹 前端早读课 1周前 前言 平时大家开发动画是采用什么方式呢?虽然18年过半,可这十个动画库是真的没听过几个,有点尴尬.今日早读文章由@ ...
- AOS – 另外一个独特的页面滚动动画库（CSS3）
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- CSS3 Animation Cheat Sheet：实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
- Snabbt.js – 极简的 JavaScript 动画库
Snabbt.js 是一个简约的 JavaScript 动画库.它会平移,旋转,缩放,倾斜和调整你的元素.通过矩阵乘法运算,变换等可以任何你想要的方式进行组合.最终的结果通过 CSS3 变换矩阵设置. ...
- 10个最好的 JavaScript 动画库和开发框架
虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助 ...
- Facebook开源动画库 POP-POPBasicAnimation运用
动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- 追踪app崩溃率、事件响应链、Run Loop、线程和进程、数据表的优化、动画库、Restful架构、SDWebImage的原理
1.如何追踪app崩溃率,如何解决线上闪退 当 iOS设备上的App应用闪退时,操作系统会生成一个crash日志,保存在设备上.crash日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...
随机推荐
- 后端API接口的错误信息返回规范
前言 最近我司要制定开发规范.在讨论接口返回的时候,后端的同事询问我们前端,错误信息的返回,前端有什么意见? 所以做了一些调研给到后端的同事做参考. 错误信息返回 在使用API时无可避免地会因为各种情 ...
- mysql中int型的数字怎么转换成字符串
字段:number 是integer类型 在表test中 select cast(number as char) as number from test; 或者convert()方法.因为转换 ...
- pycharm设置头文件模板（for mac)
我们要达到的效果是每次新建一个.py文件都会有头文件,关于头文件的作用之前已做解释
- HDU3062 PARTY
Party Problem Description 有n对夫妻被邀请参加一个聚会,因为场地的问题,每对夫妻中只有1人可以列席.在2n 个人中,某些人之间有着很大的矛盾(当然夫妻之间是没有矛盾的),有矛 ...
- 高性能数据导入方案&表过滤器&一对多支持筛选- .NET SqlSugar ORM
一.数据导入有哪些难题 1.数据分类 你需要将 插入.更新.忽略不计.错误数据 等进么分类汇总,最后返回给客户,如果没有很好的设计想把这些操作一步到位非常的难 2.高性能 对于插入或者更新 肯定不能单 ...
- jQuery——操作DOM
所谓Web体验,就是Web服务器与Web浏览器之间的合作.过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档.后来,我们可以用CSS技术来动态修改页面的外观. ###操作属性 jQue ...
- Linux环境mysql快速备份及迁移
在项目实施的过程中,经常会面临数据库迁移,导出和导出数据,如果用普通的mysql客户端备份,时间较长且容易出错.那么mysql快速备份及迁移,就成为数据库迁移的重中之重. 下面介绍我在项目实现过程中用 ...
- Jenkins（2）docker容器中安装python3
前言 使用docker安装jenkins环境,jenkins构建的workspace目录默认是在容器里面构建的,如果我们想执行python3的代码,需进容器内部安装python3的环境. 进jenki ...
- 数据结构-kmp算法
定义 改进字符串的匹配算法 关键:通过实现一个包含了模式串的局部匹配信息的next()函数,利用匹配失败的信息,减少匹配次数. 1.BF算法 暴力匹配 给定 文本串S "BBC ABCDAB ...
- hdu5726 GCD(gcd +二分+rmq)
Problem Description Give you a sequence of N(N≤100,000) integers : a1,...,an(0<ai≤1000,000,000). ...