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日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...
随机推荐
- Web漏洞扫描-AppScan
Web漏洞扫描-AppScan 一.AppScan简述 二.功能及特点 一.AppScan简述 IBM Security AppScan是一个适合安全专家的Web应用程序和Web服务渗透测试解决方案. ...
- HBase的Write Ahead Log (WAL)
HBase的Write Ahead Log (WAL) 一.预写日志WAL(Write-Ahead-Log) HLog HLogKey LogFlusher LogRoller Replay 问题 二 ...
- 文本处理三剑客简介（grep、awk、sed）
本章内容: 命令 描述 awk 支持所有的正则表达式 sed 默认不支持扩展表达式,加-r 选项开启 ERE,如果不加-r 使用花括号要加转义符\{\} grep 默认不支持扩展表达式,加-E 选项开 ...
- mitmproxy使用详解
mitmproxy 相比Charles.fiddler的优点在于,它可以命令行方式或脚本的方式进行mock mitmproxy不仅可以像Charles那样抓包,还可以对请求数据进行二次开发,进入高度二 ...
- Codeforces Round #675 (Div. 2)【ABCD】
比赛链接:https://codeforces.com/contest/1422 A. Fence 题意 给出三条边 $a,b,c$,构造第四条边使得四者可以围成一个四边形. 题解 $d = max( ...
- Codeforces Round #673 (Div. 2) D. Make Them Equal（数论/构造）
题目链接:https://codeforces.com/contest/1417/problem/D 题意 给出一个大小为 $n$ 的正整数数组 $a$ ,每次操作如下: 选择 $i,j$ 和 $x$ ...
- 【洛谷 p3371】模板-单源最短路径（图论）
题目:给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 解法:spfa算法. 1 #include<cstdio> 2 #include<cstdlib> 3 #in ...
- POJ1142 Smith Numbers 暴力+分解质因子
题意:题目定义了一个史密斯数,这个数的定义是:一个合数的各个位置上加起来的和等于它的素因数所有位置上的数字加起来的和.比如: 4937775=3∗5∗5∗658374+9+3+7+7+7+5=3+5+ ...
- 使用docker时报错“net/http: TLS handshake timeout”
问题原因 :该命令默认从docker远端镜像仓库中拉取镜像,但由于远端仓库的服务器是在国外,我们国内有的用户很可能都访问不到 解决:使用国内镜像仓库 docker pull registry.dock ...
- WPF 之命令（七）
一.前言 事件的作用是发布和传播一些消息,消息送达接收者,事件的使命也就完成了,至于消息响应者如何处理发送来的消息并不做规定,每个接收者可以使用自己的行为来响应事件.即事件不具有约束力. 命令 ...