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日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...
随机推荐
- HDU1814和平委员会
题目大意: 有n对的人,编号从1-2*n,m对的人之间互相不喜欢,每对人中必徐选1个人加入和平委员会,求字典序最小的解 -------------------------------- 2-SAT问题 ...
- PL/SQL 学习分享（续）
事务 事务的概述 事务的特性 回滚点 事务实例练习 动态SQL 动态SQL概述 动态SQL应用场合 动态SQL的执行语法 绑定变量 动态SQL创建表 动态SQL绑定变量 动态SQL综合案例添加数据 使 ...
- Spring Boot：添加导出Excel表格功能
1.添加POI依赖 2.创建EXCEL实体类 3.创建表格工具类 4.创建ExcelConstant 5.创建ExcelController 1.添加POI依赖 <dependency> ...
- java格式化json串
package com.loan.modules.extbiz.in.rabbitmq.util; import com.loan.modules.extbiz.in.rabbitmq.excepti ...
- 武装你的WEBAPI-OData资源更新Delta
本文属于OData系列 目录 武装你的WEBAPI-OData入门 武装你的WEBAPI-OData便捷查询 武装你的WEBAPI-OData分页查询 武装你的WEBAPI-OData资源更新Delt ...
- DEDECMS：修改DEDECMS会员中心发送邮件时，邮件内容里出现在DEDE链接
1.在member/index_do.php里,把文件里的 $mailbody .= "Power by http://www.dedecms.com 织梦内容管理系统!\r\n" ...
- Spring Security原理分析：系列集合
Spring Security 工作原理概览:https://blog.csdn.net/u012702547/article/details/89629415 spring security执行原理 ...
- MySQL常用SQL语句2
-- 1创建student和score表 CREATE TABLE Student( Id INT(10) PRIMARY KEY auto_increment, Name VARCHAR(20) N ...
- vector总结
vector是不定长数组,具有静态数组的稳定性和动态分配内存的灵活性,在赛场上不失为指针之外牺牲部分时间的保险之举. 本文先介绍一些vector常用的函数(部分借鉴一篇博客中的内容 链接),并以此为铺 ...
- 【uva 1612】Guess（算法效率，2种想法）
题意:已知 N 位选手的3题的预期得分,得分要不全拿,要不为0.且知道最后的实际名次,而且得分相同的选手,ID小的排在前面.问这样的名次可能吗.若可能,输出最后一名的最高可能得分.(N≤16384) ...