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日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...
随机推荐
- codevs1700 施工方案第二季
题目描述 Description c国边防军在边境某处的阵地是由n个地堡组成的.工兵连受命来到阵地要进行两期施工. 第一期的任务是挖掘暗道让所有地堡互联互通.现已勘测设计了m条互不相交的暗道挖掘方案, ...
- Zabbix系列优秀博文
Zabbix系列优秀博文 CSDN:菲宇:Zabbix专栏
- 应急响应-PDCERF模型 (转)
目录 应急响应流程 防御模型 SDL 应急响应流程 很多人认为应急响应就是脸上被黑的机器去查查什么情况,是不是被中了botnet病毒.是不是被人中了rootkit等,是不是被挂了webshell等.应 ...
- 客户端，Scala：Spark查询Phoenix
客户端,Scala:Spark查询Phoenix 1.pom.xml 2.配置文件 2.1config.properties 2.2MyConfig 3.entity实体(与phoenix中的tabl ...
- python模块----configpaser （key:value型 配置文件解析器）
configparser是用来读取配置文件的包,配置文件的格式类似:[section]+内容(键=值) 标准库网址:https://docs.python.org/3/library/configpa ...
- 虚拟局域网（VLAN）__语音VLAN
1.语音VLAN特性使得访问端口能够携带来自IP电话的IP语音流量.当交换机连接到Cisco IP电话时,IP电话就用第3层IP优先级(precedence)和第2层服务级别(class of ser ...
- 换一种视角看DNS(采坑篇)
换一种视角看DNS 我们尽量用精炼的语言,尽可能的规划DNS的全貌(当然笔者水平有限,如有错误请不吝赐教). 通常啊我们在个人PC中能看到DNS的配置身影就是在上网的时候,通常如果你不配置DNS可能找 ...
- Flink-v1.12官方网站翻译-P004-Flink Operations Playground
Flink操作训练场 在各种环境中部署和操作Apache Flink的方法有很多.无论这种多样性如何,Flink集群的基本构件保持不变,类似的操作原则也适用. 在这个操场上,你将学习如何管理和运行Fl ...
- P1903 [国家集训队]数颜色 / 维护队列 带修改莫队
题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...
- 【uva 10954】Add All（算法效率--Huffman编码+优先队列）
题意:有N个数,每次选2个数合并为1个数,操作的开销就是这个新的数.直到只剩下1个数,问最小总开销. 解法:合并的操作可以转化为二叉树上的操作[建模],每次选两棵根树合并成一棵新树,新树的根权值等于两 ...