我试图同时设置direction: 'reverse'
和timeline.reverse()
,但是它不起作用。如果设置loop: true
,则可以在循环中看到反向动画。但我想通过例如触发它一个按钮。这是codepen for pure javascript和here is a version with vue.js。
function doFunction() {
var paths = [
{id: '#path309', d: 'm 55.184523,127.42857 34.962798,139.6183 43.46726,120.24702 z'},
{id: '#path311', d: 'm 54.389347,121.02185 -10.922087,-0.77483 11.717263,7.18155 z'}
];
var timeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: false });
paths.forEach(function(path, index) {
timeline
.add({
targets: path.id,
d: {
value: path.d,
duration: 1000,
easing: 'easeInOutQuad'
},
offset: 1000 + 10 * index
});
});
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 200 200">
<path d="m 110.51595,80.797791 26.28083,12.271789 2.96257,10.935445 z" id="path309" />
<path d="m 70.51595,80.797791 -5.00762,25.058566 11.28845,-2.786777 z" id="path311" />
</svg>
答案 0 :(得分:1)
通过使用timeline.reverse()
,您可以反转要设置动画的时间轴的方向。
我将时间轴放在了一个范围内,因此您不必在每次点击时都重新构建时间轴,只要在发生点击时就可以将其反转。
我还使用了事件监听器来绑定函数,而不是html内联事件监听器。
重要的是,您使用animejs
v2.2.0,因为在新版本中offset
和timeline
方面的API已更改,因此该示例在较新的版本。
这是纯JavaScript示例:
/**
* We start in a scoped function to store our timeline there
*/
+function(button) {
/**
* A flag to know if we need to call reverse or not, we shouldn't on the first click
*/
var firstRun = true;
var paths = [
{id: '#path309', d: 'm 55.184523,127.42857 34.962798,139.6183 43.46726,120.24702 z'},
{id: '#path311', d: 'm 54.389347,121.02185 -10.922087,-0.77483 11.717263,7.18155 z'}
];
/**
* Disable the autoplay, we don't wanna jump the gun.
* Of if you do, remove the firstRun variable and if check.
*/
var timeline = anime.timeline({ autoplay: false, direction: 'alternate', loop: false });
paths.forEach(function(path, index) {
timeline
.add({
targets: path.id,
d: {
value: path.d,
duration: 1000,
/**
* I changed your chosen transform it because the delay
* your transform caused an almost second delay before
* it started animating.
*/
easing: 'easeInOutSine'
},
offset: 1000 + 10 * index
});
});
/**
* Listening to the click on the button
*/
button.addEventListener('click', function() {
/**
* If the animation has run, reverse the timeline
*/
if(!firstRun) {
timeline.reverse();
}
/**
* Play the animation!
*/
timeline.play();
/**
* We've run once. TIme to enable the reversing of the timeline.
*/
firstRun = false;
});
}(document.getElementById("clickMe"));
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<input id="clickMe" type="button" value="clickme" />
<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 200 200">
<path d="m 110.51595,80.797791 26.28083,12.271789 2.96257,10.935445 z" id="path309" />
<path d="m 70.51595,80.797791 -5.00762,25.058566 11.28845,-2.786777 z" id="path311" />
</svg>
这是vue.js
的示例:
new Vue({
el: '#app',
data() {
return {
timeline: anime.timeline({ autoplay: false, direction: 'alternate', loop: false }),
prepared: false,
switch1: false,
paths: [
{id: '#path309', d: 'm 55.184523,127.42857 34.962798,139.6183 43.46726,120.24702 z'},
{id: '#path311', d: 'm 54.389347,121.02185 -10.922087,-0.77483 11.717263,7.18155 z'}
]
}
},
watch: {
//called whenever switch1 changes
switch1(switchVal){
this.transform(switchVal)
}
},
methods: {
/**
* Call prepare later on, because otherwise the dom doesn't really seem initalized when the code isn't placed at the end of the document. Otherwise you can use created: to do this and a seperate flag for the first run.
*/
prepare: function() {
var timeline = this.timeline;
this.paths.forEach(function(path, index) {
timeline.add({
targets: path.id,
d: {
value: path.d,
duration: 1000,
easing: 'easeInOutSine'
}, offset: 1000 + 10 * index
})
});
this.prepared = true;
},
transform: function(direction) {
if(!this.prepared) {
this.prepare();
}
else {
this.timeline.reverse();
}
this.timeline.play();
}
}
})
#app {
padding-bottom:200px;
}
<link rel='stylesheet' href='https://unpkg.com/vuetify/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify/dist/vuetify.min.js'></script>
<script src='https://unpkg.com/vue-i18n/dist/vue-i18n.js'></script>
<script src='https://unpkg.com/animejs@2.2.0/anime.min.js'></script>
<div id="app">
<svg
xmlns="http://www.w3.org/2000/svg"
width="100mm"
height="100mm"
viewBox="0 0 200 200"
>
<path d="m 110.51595,80.797791 26.28083,12.271789 2.96257,10.935445 z" id="path309" />
<path d="m 70.51595,80.797791 -5.00762,25.058566 11.28845,-2.786777 z" id="path311" />
</svg>
<v-switch
v-model="switch1"
label="Switch to transform and reverse"
color="green"
></v-switch>
</div>