anime 动画引擎

anime官网地址
anime中文官网地址

<template><div class="title">基本使用方法</div><div class="amine-box"><div class="old"></div><div class="animation" ref="ani"></div></div><br><br>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import anime from 'animejs'const ani = ref();let AniObj = null;
onMounted(() => {AniObj = anime({// 简单的配置// 所有不需要的项目都可以删除targets: ani.value,// 需要改变的属性//（大多数单位可以省略）// (省略时使用默认单位：例如 rotate，单位 deg，translateX 单位 px)translateX: 300,// 独立的动画属性（同步）rotate: {value: 360,duration: 700,easing: 'easeInOutSine'},// 持续时间duration: 1000,// 延迟delay: 200,// 末端延迟（在动画结束时以毫秒为单位添加一些额外时间）endDelay: 1000,// 动画曲线easing: 'easeInOutExpo',// 循环loop: true,// 动画方向（normal ： 正向，reverse：反向，alternate往返（一次正向，一次反向））direction: 'normal',// 自动播放（改为false，可以根据代码进行控制什么时候播放）autoplay: true,});
})onUnmounted(() => {// 目前 Anime 没有释放缓存的办法，// 只能停止动画AniObj.pause();
})</script>
<style lang="less" scoped>
.title {padding: 5px 10px;margin-bottom: 10px;font-size: 16px;border-bottom: 1px solid #999;
}.amine-box {width: 100%;height: 100px;position: relative;background-color: rgba(255, 255, 255, 0.1);
}.old,
.animation {position: absolute;top: 35px;width: 30px;height: 30px;background-color: brown;left: 60px;
}.old {opacity: 0.5;
}
</style>

anime 动画引擎相关推荐

聊聊动画引擎 pop
iOS可以通过CADisplayLink实现自定义动画引擎,pop就是基于此实现的,而且比原生Core Animation更强大好用.譬如当ViewController侧滑返回的时候,系统会将Core ...
如何将unity3d动画嵌入html,在Unity3D中使用精灵动画引擎制作动画的两种方法
7月28日消息,如今的游戏玩家对于游戏角色的动作要求越来越高,给开发者提出了众多的要求,工作量也相应上升.那么如何才能简单快速地制作角色动画以提升效率呢?下面就和大家分享两个在Unity3D中使用精灵 ...
android 动画引擎,用 Android 实现一条小金鱼游动动画（超棒）
此篇中的小鱼动画是模仿国外一个大牛做的flash动画,第一眼就爱上它了,简约灵动又不失美学,于是抽空试着尝试了一下,如下是我用Android实现的效果图: 用 Android 实现一条小金鱼游动动画( ...
Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
在Unity3D中使用精灵动画引擎制作动画的两种方法
本文节选翻译自Gamasutra社区博客,文中观点仅代表作者本人意见,与本公众号无关. 在Unity3D中使用精灵动画引擎的两种方法本文将介绍两种简单快捷的方法来制作游戏角色动画. 1.动画和动画控 ...
priteSheet精灵动画引擎
priteSheet精灵动画引擎本文介绍Flash中SpriteSheet精灵序列图与其它渲染方式的性能对比.SpriteSheet的原理及注意实现,最后实现了一个精灵序列图的渲染引擎.本文的Spr ...
ios网易云音乐源码、动画引擎源码等
iOS精选源码自己维护的框架, 超级多功能图片选择SDK:支持多选,相册选择,预览,网络图预览一款可以简单实现长按拖拽重排的 UICellCollectionView Cell框... 动画引擎 ...
python3安装要钱吗_3b1b/manim数学动画引擎安装教程(2020-8月)
观看完本教程,你将学会如何配置Manim.3blue1brown/manim 难以置信,写了几万字的专栏被B站吃了??没保存上???心态炸了........ 太难受了,重写吧. 心情不好文笔可能比较尖 ...
【3D服装级设计/游戏动画引擎】Marvelous Designer软件
MD可以满足设计师对服装细节和品质的苛求,并且和OBJ文件以及其它3D软件也可以很好的兼容,所以MD不仅是各大服装设计师的必备软件,更是EA,Konami等全球顶尖的游戏工作室的最爱. 附 Blend ...

anime 动画引擎

anime 动画引擎相关推荐

最新文章

热门文章