Anime: CSS STEPS equivalent

[darkylmnx]

hi, i'd like to know if there's a steps equivalent with this lib, because i'd like to create a kif of gif based on an image sprite i have.

similar to this https://dribbble.com/shots/1961116-Worldclass so i would need to animate from one position to another but by steps, not smoothly

like from 0 to 10, 10 to 30, 30 to 50...

Any way to acheive this ? I thought of keyframes but it doesn't act like the css STEPS func (i could totally use full css though but as this animation is part of other many it would be cool to use the lib)

[juliangarnier]

Hey, no, there is no built-in equivalent, but since _anime_ accepts functions as values, it's relatively easy to create your own.

Maybe something like this :

function steps(startValue, endValue, numberOfSteps, duration) {
  const interval = (endValue - startValue) / numberOfSteps;
  const delay = duration / numberOfSteps;
  let value = startValue;
  let keyframes = [];
  for (let i = 0; i < numberOfSteps; i++) {
    value += interval;
    keyframes.push({
      value: value,
      duration: 1,
      delay: delay,
      easing: 'linear'
    });
  }
  return keyframes;
}

https://codepen.io/juliangarnier/pen/vmoyQj?editors=0110

[satiewaltz]

@darkylmnx
I've made a utility function for this purpose based off the step easing function that is present in Velocity.js:
https://github.com/julianshapiro/velocity/blob/master/velocity.js#L893

function steppedEasing(steps) {
  return anime.easings['steppedEasing'] = function(progress) {
    return Math.round(progress * steps) * (1 / steps);
  };
}

// Call it
steppedEasing(12); // 12 steps are evenly interpolated across the animation
anime({
  target: '.sprite',
  easing: 'steppedEasing',
  translateX: [0, 100]
});

@juliangarnier
Is it possible that I can make a PR for this so we can have it baked in anime.js? I've used this for sprite animations and I see a lot of people having a need for this kind of easing.

[darkylmnx]

not bad @satiewaltz ! good idea

thanks @juliangarnier for the func, could it be possible to have natively based on @satiewaltz 's PR ?

[juliangarnier]

It can be a nice addition.
Is it working the way you wanted?

[juliangarnier]

CSS steps easing has been released in V3 !

[littlee]

the current steps easing can not implement sprite sheet animation

I have to do something like this:

anime({
  targets: '.sprite',
  keyframes: Array(10)
    .fill('')
    .map((item, index, arr) => {
      return {
        translateX: -100 * ((index + 1) % arr.length),
        duration: 1,
        delay: 100
      };
    }),
  loop: true
})

[juliangarnier]

Thanks, I will keep this in mind for the next release!