Comments (8)
If you use single RAF, I have an idea
For example
var factory = new animeFactory();
var aim = new anime();
factory.add(anim);
factory.tick(timeElepse/* avail negative */);
We can create slow-motion animation and invert animation, as applied to all animation on browser.
This is my cpp animation manager.
https://github.com/devmario/CppTweener/blob/master/tween.h
https://github.com/devmario/CppTweener/blob/master/tween.cpp
from anime.
I think it's actually possible to do what you described.
Anime expose the .tick() function of an animation, and you can do things like this :
var myAnimation = anime({
targets: '.particule',
translateX: 100,
autoplay: false
});
function render(time) {
myAnimation.tick(time);
requestAnimationFrame(render)
}
render();
from anime.
@juliangarnier
How about this
http://jsfiddle.net/devmario/9d8orpg5/12/
from anime.
@devmario It's an interesting idea, but I cant think of any real use cases of this.
Looks cool though.
from anime.
Creating multiple RAFs is bad for performance. I was using it for 3D/VR, but had to switch back to Tween.js because I wasn't able to control when the animations ticked.
from anime.
Anime only creates one single RAF, and stop ticking when there is nothing to animate.
I also use the update() callback whenever I need a RAF call, like this:
var loop = anime({
update: function() { do stuff.. },
duration: Infinity
});
loop.play();
loop.pause();
That way I'm not creating extra RAF, and I can control when something is running or not easily.
Regarding performance, V2 will considerably improve speed on complex animations, around 1.5x faster. (You can try it here: https://github.com/juliangarnier/anime/tree/v2.0)
from anime.
Awesome! It won't work for my cases though. For 3D/VR scenes, there's already an existing RAF (the render loop), and for those cases, we want to control the animation to update only once per frame. Something like:
render: function (time) {
// ...
if (notPaused) {
anime.tick(time);
}
// ...
}
If I pause the scene, I'd want the animation to automatically pause as a result of not "ticking" it.
from anime.
Thanks, that looks perfect! Will give it a try.
from anime.
Related Issues (20)
- Speed up the duration during reverse playback
- Unable to use anime.js with node and express HOT 11
- Feature: ability to set innerHTML beyond numeric values HOT 1
- Spider-weeb app
- Bug report: spring-based motion not completing (Vanilla JS, HTML, CSS) HOT 4
- How to run animation on same element but with different text ? HOT 3
- can you run a for each loop in the targets? or refresh where the target is pointing to with the loopComplete callback?
- Just a question about line drawing in the docs HOT 2
- Why a cant use play/pause buttons? HOT 1
- Why cant I connect anime? HOT 1
- Does anime have a feature that can be used to implement horizontal scrolling? HOT 1
- anime.seek(0) not working HOT 3
- Anime V4 HOT 2
- Duration property problem when I use an event
- animejs morph is broken for more then 1 object HOT 1
- Refusal for Execution HOT 4
- Timeline does not draw all paths (stoke dash effect) HOT 1
- There are non-trivial differences between anime.js and anime.min.js. HOT 1
- Possible problem with SVG and transform-box HOT 3
- Ability to run it server-side
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anime.