- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有什么方法可以在 anime.js 中链接动画,或者有队列/动画组可以等待以便继续其他动画?
最佳答案
anime
的每个动画都会返回一个 promise,因此您可以将 async/await
与 Promise.all
结合使用,请记住,尽管如此, Promise.all
使得所有动画同时运行。例如,假设您希望同时运行 3 个动画,然后在该组完成后,再执行另一个动画:
async function animateLockAndBackground() {
const bigLockAnimation = anime({
targets: '#big-lock',
strokeDashoffset: [0, 5],
easing: 'easeInOutSine',
duration: 250,
easing: 'easeInSine'
}).finished;
const lockLineAnimation = anime({
targets: '#lock-line',
strokeDashoffset: [0, 3],
translateY: [{
value: '-2px',
duration: 350,
easing: 'easeOutExpo'
},
{
value: '2px',
duration: 350,
easing: 'easeOutExpo'
},
{
value: '-2px',
duration: 350,
easing: 'easeOutExpo'
},
],
}).finished;
const innerCircleAnimation = anime({
targets: '#inner-circle',
translateY: [{
value: '-1px',
duration: 250,
easing: 'easeOutExpo'
},
{
value: '1px',
duration: 250,
easing: 'easeOutExpo'
},
{
value: '-1px',
duration: 250,
easing: 'easeOutExpo'
},
{
value: 0,
duration: 250,
easing: 'easeOutExpo'
},
],
}).finished;
await Promise.all([bigLockAnimation, lockLineAnimation, innerCircleAnimation]);
}
animateLockAndBackground().then(() => {
console.log('First animation finished.');
anime({
targets: '.plugins-not-installed-text',
translateY: [{
value: '10px',
duration: 750
}]
});
anime({
targets: '#lock-wrapper',
translateY: [{
value: '-10px',
duration: 750
}]
});
anime({
targets: '#plugins-not-installed-screen',
opacity: 0,
duration: 500,
easing: 'linear'
}).finished.then(() => {
console.log('Second animation finished.');
});
});
#plugins-not-installed-screen {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
#plugins-not-installed-screen .upper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
padding: 24px 48px;
background-image: url('../Images/component.png');
background-repeat: repeat;
}
.plugins-not-installed-text {
font-size: 15px;
text-align: center;
}
#lock {
display: block;
width: 50px;
height: 65px;
}
#plugins-not-installed-screen #lock {}
#plugins-not-installed-screen #big-lock {
stroke-dasharray: 61 62;
stroke-dashoffset: 5;
/* go to 5 */
}
#plugins-not-installed-screen #lock-line {
stroke-dasharray: 31 33;
stroke-dashoffset: 0;
/* go to 3 */
}
#components-to-install-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.install-component-individual {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<div id="plugins-not-installed-screen" class="">
<div class="upper">
<div id="lock-wrapper">
<svg version="1.1" id="lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 35" style="enable-background:new 0 0 25 35;" xml:space="preserve">
<style type="text/css">
#big-lock{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#inner-circle{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
#lock-line{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<path id="big-lock" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9
c0.1,0,0.2,0,0.3,0c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11"/>
<circle id="inner-circle" cx="12.7" cy="21.9" r="2.9"/>
<path id="lock-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8"/>
</svg>
</div>
<h5 class="plugins-not-installed-text">Plugins not installed.</h5>
</div>
</div>
那么,如果你想在该函数内让 lock-line
动画,同时其他 2 个元素正在动画,那么你只需要 3 个动画时间轴而不是2?这里:
async function animateLockAndBackground() {
const bigLockAnimation = anime({
targets: '#big-lock',
strokeDashoffset: [0, 5],
easing: 'easeInOutSine',
duration: 250,
easing: 'easeInSine'
}).finished;
const innerCircleAnimation = anime({
targets: '#inner-circle',
translateY: [
{value: '-1px', duration: 250, easing: 'easeOutExpo'},
{value: '1px', duration: 250, easing: 'easeOutExpo'},
{value: '-1px', duration: 250, easing: 'easeOutExpo'},
{value: 0, duration: 250, easing: 'easeOutExpo'},
],
}).finished;
await Promise.all([bigLockAnimation, innerCircleAnimation]);
}
animateLockAndBackground().then(() => {
return anime({
targets: '#lock-line',
strokeDashoffset: [0, 3],
translateY: [
{value: '-2px', duration: 350, easing: 'easeOutExpo'},
{value: '2px', duration: 350, easing: 'easeOutExpo'},
{value: '-2px', duration: 350, easing: 'easeOutExpo'},
],
}).finished;
}).then(() => {
anime({
targets: '.plugins-not-installed-text',
translateY: [
{value: '10px', duration: 750}
]
});
anime({
targets: '#lock-wrapper',
translateY: [
{value: '-10px', duration: 750}
]
});
anime({
targets: '#plugins-not-installed-screen',
opacity: 0,
duration: 500,
easing: 'linear'
});
});
我们将那个 lock-line
动画移到原始组之外,让它等待组,然后 lock-line
之后的任何其他动画都会随之动画。
您应该将动画视为可以链接的简单 promise 。
关于javascript - 如何在 anime.js 中链接动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58147641/
我想使用 linux 终端在 .txt 文档中找到字符串 animal-0**。 ** 是从 60 到 69 的数字。我想我必须在命令中使用 grep 和正则表达式:grep -E 'animal-0
在他的C# 深入一书中,Jon Skeet 试图回答以下问题: Why can't I convert List to List? 为了解释它,他从一个代码片段开始,其中包括以下两行: Animal[
我对此有点困惑,所以希望能提供一些说明。 public void addAll(List animals) 对比 public void addAll(List animals) 最佳答案 区别在于
我遇到的情况是,我有许多CALayer以“基于回合”的方式进行动画处理。我为每个CALayer上的位置设置了动画,但是它们具有完全相同的持续时间。一旦所有这些CALayer动画完成,就会启动一个新的“
我为正在拔出的刀和空闲状态设置了动画,但是无论我做什么,它们都不会在游戏中设置动画。相反,它卡住在第一帧上。这是动画窗口运行时的样子: 动画: 在检查器中: 最佳答案 我遇到了类似的问题,它归结于动画
我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1,然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画?比如当我从右向左滑动
我想做一个动画标题。 我创建了一个 FlatList 的动画组件, 用过 onScroll函数来更新动画值。 使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList
我想制作一个打开的窗帘的动画。我有两张图像:一张用于窗帘的左侧,一张用于窗帘的右侧(以红色表示)。我想用核心动画顺利地将它们滑走。我应该寻找什么类型的动画?如何实现逼真的滑动风格? 问候, 斯特凡 a
我有一个简单的旋转动画,可以让一个对象绕其轴旋转。目前它旋转得太快了,我想减慢速度,我试过增加样本??但我对动画了解不多,所以我可能过得很好。如何放慢动画速度?它只有两个键。 最佳答案 首先,通过双击
我似乎无法在上类时获得 angularjs ng-animate,而且在野外似乎也没有任何示例。以演示 fiddle 为例: http://jsfiddle.net/yfajy/ 向 CSS 添加如下
使用以下代码段:http://jsfiddle.net/sylouuu/V7a3Y/2/ 我想在动画的#log 中显示从 0% 到 100% 的进度百分比,100% 很容易通过回调... 有可能这样做
我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。 我一直在考虑使用动画工具来更改折线点属性,但到目前为止一直无法找到
您好,在 Firefox(相当糟糕)和 Chrome 之间获得可变性能和效果(还可以)有时这不会执行第一个动画,有时会卡住。 我的结构正确吗? $notification.animate({
我在 iOS 编程时遇到了一个问题:当我尝试为我的 tableView 制作自定义编辑按钮时,我无法将其设置为动画。下面是我如何初始化 tableview: - (void)viewWillAppea
自 beta 5 以来,我注意到在 OS X 10.10 下隐式动画有一些奇怪的行为。调用动画代理有时会导致应用程序崩溃。我设置了一个非常简单的自定义 View 。这是完整的代码: import Co
我正在开发一个可折叠组件,您可以单击它来向上/向下滚动以显示/隐藏详细信息。组件如下: // component.ts import {Component, Directive, Input} fro
我正在努力了解 web animations standard和他们的 polyfill ,正如我所见,它在 Angular 动画库中运行良好(您将动画结束值设置为“*”,这将变为 div 大小的 1
我想创建一个动画闪屏,但出现此错误: Android.Content.Res.Resources+NotFoundException: File res/drawable/splash_screen.
我正在尝试对我的应用程序应用慢动作效果,就像按 Shift 时如何减慢 Mac OS 的大多数图形效果一样。 我的应用程序使用 CoreAnimation,所以我认为它应该没什么大不了的:set sp
我想以编程方式同时不在XML文件中显示两个动画,它应该 ROTATE和TRANSLATE 我怎样才能做到这一点? 请以某种方式建议我?????? 这是ma代码:> ImageView snowImg1
我是一名优秀的程序员,十分优秀!