animeJS

[taenykim]

https://animejs.com/documentation/

[taenykim]

속성

• translate : 해당 값만큼 이동하는 것이 아니라 해당 값으로 이동하는 것
• rotate : 1turn, deg

API

• value가 [a,b] 형태로 들어갈 경우, start 값, end값이 된다.

👍 relative

해당 값만큼 이동하는 것이 아니라 해당 값으로 이동하는 것 ISSUE resolve

anime({
  targets: ".el.relative-values",
  translateX: {
    value: "*=2.5", // 100px * 2.5 = '250px'
    duration: 1000,
  },
  width: {
    value: "-=20px", // 28 - 20 = '8px'
    duration: 1800,
    easing: "easeInOutSine",
  },
  rotate: {
    value: "+=2turn", // 0 + 2 = '2turn'
    duration: 1800,
    easing: "easeInOutSine",
  },
  direction: "alternate",
});

- 상대값으로 value를 적어주면 상대적으로 제어가 가능하다.

[taenykim]

Object animation

var logEl = document.querySelector('.battery-log');

var battery = {
  charged: '0%',
  cycles: 120
}

anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});

1. targets에 엘리먼트가 들어가는 게 아니라 Object가 들어감
2. Object의 프로퍼티가 anime 프로퍼티로 들어감 (dest)

[taenykim]

svg

• polygon : 닫힌 path (points 좌표를 이어서 만듬)
• direction : "alternate" -> 애니메이션 번갈아가면서 실행
• feTurbulence : 구름이나 대리석과 같은 인공 질감을 합성 (baseFrequency 로 제어)
• feDisplacementMap : 참조

[taenykim]

specific property

anime({
  targets: ".specific-prop-params-demo",
  translateX: {
    value: 250,
    duration: 800,
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: "easeInOutSine",
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 1000,
    easing: "easeInOutQuart",
  },
  delay: 3000, // All properties except 'scale' inherit 250ms delay
});

만약 이런 형태이면 공통 delay는 scale 외 모든 속성에 적용되고, scale은 1000으로 개인 속성으로 적용된다.

[taenykim]

function based parameters

anime({
  targets: '.function-based-params-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  delay: function(el, i, l) {
    return i * 100;
  },
  endDelay: function(el, i, l) {
    return (l - i) * 100;
  }
});

요렇게 함수로도 작성가능, target과, index, total length 에 접근이 가능하다

function based values

anime({
  targets: ".function-based-values-demo .el",
  translateX: (el: HTMLElement) => {
    return el.getAttribute("data-x");
  },
  translateY: (el: HTMLElement, i: number) => {
    return 50 + -50 * i;
  },
  scale: (el: HTMLElement, i: number, l: number) => {
    return l - i + 0.25;
  },
  rotate: () => {
    return anime.random(-360, 360);
  },
  borderRadius: () => {
    return ["50%", anime.random(10, 35) + "%"];
  },
  duration: () => {
    return anime.random(1200, 1800);
  },
  delay: () => {
    return anime.random(0, 400);
  },
  direction: "alternate",
  loop: true,
});

• data-x 처럼 엘리먼트 속성값으로 정의내릴 수도 있다
• anime.random도 있다

[taenykim]

🕹 timeline, add (Method)

var colorsExamples = anime.timeline({
  endDelay: 1000,
  easing: 'easeInOutQuad',
  direction: 'alternate',
  loop: true
})
.add({ targets: '.color-hex',  background: '#FFF' }, 0)
.add({ targets: '.color-rgb',  background: 'rgb(255,255,255)' }, 0)
.add({ targets: '.color-hsl',  background: 'hsl(0, 100%, 100%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(255,255,255, .2)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 100%, 100%, .2)' }, 0)
.add({ targets: '.colors-demo .el', translateX: 270 }, 0);

• 타임라인으로 애니메이션을 정의하고 add로 타겟과 specific 속성 정의

offset

.add({
  targets: '.offsets-demo .el.circle',
  translateX: 250,
}, '-=600') // relative offset
.add({
  targets: '.offsets-demo .el.triangle',
  translateX: 250,
}, 400); // absolute offset

• +=number or -=number 는 이전 애니메이션에서 상대적인 시간으로 부여되고,
• number는 절대적인 시간으로 부여됨.

[taenykim]

keyframes

anime({
  targets: '.property-keyframes-demo .el',
  translateX: [
    { value: 250, duration: 1000, delay: 500 },
    { value: 0, duration: 1000, delay: 500 }
  ],
  translateY: [
    { value: -40, duration: 500 },
    { value: 40, duration: 500, delay: 1000 },
    { value: 0, duration: 500, delay: 1000 }
  ],
  scaleX: [
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 },
    { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
    { value: 1, duration: 900 }
  ],
  scaleY: [
    { value: [1.75, 1], duration: 500 },
    { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 },
    { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
    { value: 1, duration: 450 }
  ],
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

• 키프레임 각 값마다 duration이 없으면 전체 duration을 일정하게 나눈 값만큼 실행됨.

[taenykim]

stagger

• value는 순서대로 (0 x, 1 x, 2 * x) 적용됨
• option
  • delay | start : start + 0 x, start + 1 x ... 순으로 적용됨
  • delay | from : 'center' or 'first' or 'last' or index : 시작포인투
  • delay | direction : reverse 반대로 시작함
• anime.stagger(number[]) 형태
  • rotate : anime.stagger(-360,360)
  • -360 + ((360 - (-360)) / 5) 0, -360 + ((360 - (-360)) / 5) x ... 순으로 적용됨

easing

anime({
  targets: ".staggering-easing-demo .el",
  translateX: 270,
  delay: anime.stagger(1000, { easing: "easeOutQuad" }),
});

• easing의 경우, 하나하나가 적용되는 게 아니라 요소별로 실행되는 타임라인에 적용됨

gird

anime({
  targets: ".staggering-grid-demo .el",
  scale: [
    { value: 2, easing: "easeInOutQuad", duration: 200 },
    { value: 1, easing: "easeInOutQuad", duration: 300 },
  ],
  delay: anime.stagger(200, { grid: [14, 5], from: "center" }),
});

axes

anime({
  targets: ".staggering-axis-grid-demo .el",
  translateX: anime.stagger(10, { grid: [14, 5], from: "first", axis: "x" }),
  translateY: anime.stagger(10, { grid: [14, 5], from: "first", axis: "y" }),
  rotateZ: anime.stagger([0, 90], { grid: [14, 5], from: "first", axis: "x" }),
  delay: anime.stagger(100, { grid: [14, 5], from: "first" }),
  easing: "easeInOutQuad",
  duration: 700,
});

[taenykim]

🕹 play, pause, restart, reverse (Method)

const animation = anime({
   ...
   autoplay: false
});

animation.play();
animation.pause();
animation.restart();
animation.reverse();

animation.seek(timeStamp); /* timeStamp로 시간이동. animation.duration * percent */

[taenykim]

Update

• update 속성은 매 프레임마다 실행되는 콜백 (change도있음 -> 얘는 딜레이 미포함)
• begin 속성은 첫번째 실행되는 콜백 (loopBegin도있음) (changeBegin도있음)
• complete 속성은 마지막 실행되는 콜백 (loopComplete도있음) (changeComplete도 있음)

[taenykim]

Promise

const ani = anime({})
ani.finished.then(() => {
  console.log("hey");
});