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日志上有很多有用的信息,比如每个正在执行线程的完整堆栈 跟踪信 ...
随机推荐
- Spring Boot中的静态资源文件
Spring Boot中的静态资源文件 1.SSM中的配置 2.Spring Boot 中的配置 2.1 整体规划 2.2 源码解读 2.3 自定义配置 2.3.1 application.prope ...
- 使用cronolog按日期分割日志
cronologcronolog是一个简单的过滤程序从标准输入读取日志文件条目,每个条目写入到输出文件指定一个文件名模板和当前的日期和时间.当扩大的文件名更改,关闭当前文件,并打开一个新的. cron ...
- Thank in Java
Think in Java 2.一切都是对象 2.1 引用操作对象 Java 中一切都是对象,因此可以采用单一固定得语法. 操作对象得标识符实际上是对对象得一个 "引用"refer ...
- gym101002K. Inversions (FFT)
题意:给定一个仅含有AB的字母串 如果i有一个B j有一个A 且j>i 会对F(j-i)产生贡献 求出所有发Fi 题解:好像是很裸的FFT B的分布可以看作一个多项式 同理A也可以 然后把B的位 ...
- L2-007 家庭房产 (25分) 并查集
题目链接 题解:并查集把一个家的并在一起,特殊的一点是编号大的并到小的去.这个题有个坑编号可能为0000,会错数据3和5. 1 #include<bits/stdc++.h> 2 usin ...
- 【noi 2.6_6046】数据包的调度机制（区间DP）
题意:给定一个队列延迟值为Di的任务,以任意顺序入栈和出栈,第K个出栈的延迟值为(K-1)*Di.问最小的延迟值. 解法:f[i][l]表示完成以第i个任务开始,长度为l,到第i+l-1个任务的最小延 ...
- HDU 1565 方格取数 状压dp
题目: 给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大. Input 包括多 ...
- Poj-3922 A simple stone game（k倍动态减法）
题意: 游戏是这样的:两个玩家以一堆n个石头开始游戏.他们轮流从石堆里取石头,每次至少取一块.先走的人第一步最多可以拿n-1块石头.从那时起,一个玩家最多可以拿k倍于他的对手上次拿的石头.例如,如果一 ...
- Java 窗口 绘制图形 #1
写在前面: editplus换成eclipse了 Sketchpad要钱,买不起 自己搞(rua) by emeralddarkness 建立了一个平面直角坐标系 两个变元x,y,参数i 实现了以下功 ...
- PowerShell随笔9--- call
很多时候我们需要在一个脚本文件执行另外一个脚本文件,比如我们有一个Test.ps1文件 我们有以下2种方法: Invoke-Expression (&) 我们可以看到,Test.ps1中的代码 ...