<!--헤드에 넣어주세요-->
<script src="https://kstost.github.io/knimation/knimation.js"></script>

<div id="box1" class="selev"></div>

<div id="box1" class="selev"></div>

let box = document.getElementById('box1');
Knimation(box, { left: [100, 200] });

// 100 에서 200 으로 이동합니다
// element 를 Knimation 함수의 첫 인자로,
// 두번째 인자로는 애니메이션 관련 옵션을 넣습니다

let box = document.getElementById('box1');
Knimation(box, { left: [100, 200] });

// 100 에서 200 으로 이동합니다
// element 를 Knimation 함수의 첫 인자로,
// 두번째 인자로는 애니메이션 관련 옵션을 넣습니다

<div id="box2" class="selev"></div>

<div id="box2" class="selev"></div>

let box = document.getElementById('box2');
Knimation(box, { left: [100, 200], duration: 5000 });

// duration 으로 속도를 정할 수 있습니다
// 5000 은 5초

let box = document.getElementById('box2');
Knimation(box, { left: [100, 200], duration: 5000 });

// duration 으로 속도를 정할 수 있습니다
// 5000 은 5초

<div id="box3" class="selev"></div>

<div id="box3" class="selev"></div>

let box = document.getElementById('box3');
Knimation(box, {
    left: [0, 10, 'em'],
    // 이렇게 [] 에 세개의 항목을 넣으면
    // 시작점 0에서 끝점 10까지로 이동하고
    // 이 값들의 단위는 em으로 정의합니다
    // [0, 10] 이렇게만 해주면 단위의 기본은 px입니다
    duration: 5000
});

let box = document.getElementById('box3');
Knimation(box, {
    left: [0, 10, 'em'],
    // 이렇게 [] 에 세개의 항목을 넣으면
    // 시작점 0에서 끝점 10까지로 이동하고
    // 이 값들의 단위는 em으로 정의합니다
    // [0, 10] 이렇게만 해주면 단위의 기본은 px입니다
    duration: 5000
});

<div id="box4" class="selev"></div>

<div id="box4" class="selev"></div>

let box = document.getElementById('box4');
Knimation(box, {
    left: [0, 100],
    opacity: [1, 0.3],
    // 동시에 두가지 이상의 속성을 변경할 수 있습니다

    duration: 5000
});

let box = document.getElementById('box4');
Knimation(box, {
    left: [0, 100],
    opacity: [1, 0.3],
    // 동시에 두가지 이상의 속성을 변경할 수 있습니다

    duration: 5000
});

<div id="box5" class="selev"></div>

<div id="box5" class="selev"></div>

let box = document.getElementById('box5');
Knimation(box, {
    left: [100, 200],
    duration: 1000,
    complete: () => {
        // 애니메이션 종료시 실행 될 함수를 등록할 수 있습니다
        box.style.backgroundColor = 'yellow';
        box.style.borderRadius = '20px';
    }
});

let box = document.getElementById('box5');
Knimation(box, {
    left: [100, 200],
    duration: 1000,
    complete: () => {
        // 애니메이션 종료시 실행 될 함수를 등록할 수 있습니다
        box.style.backgroundColor = 'yellow';
        box.style.borderRadius = '20px';
    }
});

<div id="box6" class="selev"></div>

<div id="box6" class="selev"></div>

let box = document.getElementById('box6');
Knimation(box, [
    { left: [40, 100], duration: 1000 },
    { left: [100, 40], duration: 1000 },
]);
// [] 에 스케쥴을 여러개 넣을 수 있습니다

let box = document.getElementById('box6');
Knimation(box, [
    { left: [40, 100], duration: 1000 },
    { left: [100, 40], duration: 1000 },
]);
// [] 에 스케쥴을 여러개 넣을 수 있습니다

<div id="box7" class="selev"></div>

<div id="box7" class="selev"></div>

let box = document.getElementById('box7');
Knimation(box, [
    { left: 100, duration: 1000 },
    { top: -20, duration: 1000 },
]);
// 이렇게 숫자를 한개만 넣으면 현재위치에 해당 값을 더한곳을 목표로 향해갑니다

let box = document.getElementById('box7');
Knimation(box, [
    { left: 100, duration: 1000 },
    { top: -20, duration: 1000 },
]);
// 이렇게 숫자를 한개만 넣으면 현재위치에 해당 값을 더한곳을 목표로 향해갑니다

<div id="box8" class="selev"></div>

<div id="box8" class="selev"></div>

let box = document.getElementById('box8');
Knimation(box, [
    { left: 100, duration: 500 },
    { left: -100, duration: 500 },
    true,
]);
// 마지막요소에 true 를 넣어주면 해당 스케쥴을 무한으로 반복합니다

let box = document.getElementById('box8');
Knimation(box, [
    { left: 100, duration: 500 },
    { left: -100, duration: 500 },
    true,
]);
// 마지막요소에 true 를 넣어주면 해당 스케쥴을 무한으로 반복합니다

<button id='pause'>잠시정지</button>
<button id='resume'>재생재개</button>
<button id='destroy'>완전종료</button>
<div id="box9" class="selev"></div>

<button id='pause'>잠시정지</button>
<button id='resume'>재생재개</button>
<button id='destroy'>완전종료</button>
<div id="box9" class="selev"></div>

let box = document.getElementById('box9');
let ani = Knimation(box, [
    { left: 100, duration: 500 },
    { left: -100, duration: 500 },
    true,
]);
// 마지막요소에 true 를 넣어주면 해당 스케쥴을 무한으로 반복합니다
// 이렇게 무한반복하는 스케쥴에 대해서 정지, 재개, 완전종료 처리를 할 수 있습니다.
document.getElementById('pause').onclick = () => {
    ani.pause();
}
document.getElementById('resume').onclick = () => {
    ani.resume();
}
document.getElementById('destroy').onclick = () => {
    ani.destroy();
}

let box = document.getElementById('box9');
let ani = Knimation(box, [
    { left: 100, duration: 500 },
    { left: -100, duration: 500 },
    true,
]);
// 마지막요소에 true 를 넣어주면 해당 스케쥴을 무한으로 반복합니다
// 이렇게 무한반복하는 스케쥴에 대해서 정지, 재개, 완전종료 처리를 할 수 있습니다.
document.getElementById('pause').onclick = () => {
    ani.pause();
}
document.getElementById('resume').onclick = () => {
    ani.resume();
}
document.getElementById('destroy').onclick = () => {
    ani.destroy();
}

<div id="box10" class="selev"></div>

<div id="box10" class="selev"></div>

let toggle = true;
let box = document.getElementById('box10');
Knimation(box, [
    () => {
        // 원하는 코드 실행
        toggle = !toggle;
        box.style.backgroundColor = toggle ?
            'red' : 'blue';
    },
    { left: 100, duration: 500 },
    { top: 100, duration: 500 },
    () => {
        // 원하는 코드 실행
        toggle = !toggle;
        box.style.backgroundColor = toggle ?
            'red' : 'blue';
    },
    { left: -100, duration: 500 },
    { top: -100, duration: 500 },
    true,
]);

// 스케쥴 중간중간에 실행을 원하는 함수를 넣을 수 있습니다

let toggle = true;
let box = document.getElementById('box10');
Knimation(box, [
    () => {
        // 원하는 코드 실행
        toggle = !toggle;
        box.style.backgroundColor = toggle ?
            'red' : 'blue';
    },
    { left: 100, duration: 500 },
    { top: 100, duration: 500 },
    () => {
        // 원하는 코드 실행
        toggle = !toggle;
        box.style.backgroundColor = toggle ?
            'red' : 'blue';
    },
    { left: -100, duration: 500 },
    { top: -100, duration: 500 },
    true,
]);

// 스케쥴 중간중간에 실행을 원하는 함수를 넣을 수 있습니다

<div id="box11a" class="selev"></div>
<div id="box11b" class="selev"></div>

<div id="box11a" class="selev"></div>
<div id="box11b" class="selev"></div>

// ease 속성에 움직임의 가속도 모드를 설정하여 더욱 자연스러운 움직임을 표현할 수 있습니다.
// 움직임 효과의 종류는 linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint 가 있습니다.

let box = document.getElementById('box11a');
Knimation(box, [
    { left: 200, duration: 500, ease: 'easeInQuad' },
    { left: -200, duration: 500, ease: 'easeOutQuad' },
    true
]);

// ease 를 적용하지 않은 모습 (일정한 속도의 변화)
let box2 = document.getElementById('box11b');
Knimation(box2, [
    { left: 200, duration: 500 },
    { left: -200, duration: 500 },
    true
]);

// ease 속성에 움직임의 가속도 모드를 설정하여 더욱 자연스러운 움직임을 표현할 수 있습니다.
// 움직임 효과의 종류는 linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint 가 있습니다.

let box = document.getElementById('box11a');
Knimation(box, [
    { left: 200, duration: 500, ease: 'easeInQuad' },
    { left: -200, duration: 500, ease: 'easeOutQuad' },
    true
]);

// ease 를 적용하지 않은 모습 (일정한 속도의 변화)
let box2 = document.getElementById('box11b');
Knimation(box2, [
    { left: 200, duration: 500 },
    { left: -200, duration: 500 },
    true
]);

<div id="box11"></div>

<div id="box11"></div>

[
'linear',
'easeInQuad',
'easeOutQuad',
'easeInOutQuad',
'easeInCubic',
'easeOutCubic',
'easeInOutCubic',
'easeInQuart',
'easeOutQuart',
'easeInOutQuart',
'easeInQuint',
'easeOutQuint',
'easeInOutQuint'].map((ease_mode, i) => {
    let div = document.createElement('div');
    div.className = 'smallbox selev';
    div.style.top = (i * (20 + 4)) + 'px';
    document.getElementById('box11').appendChild(div);
    div.innerText = ease_mode;
    Knimation(div, [
        { left: 200, duration: 2000, ease: ease_mode },
        { left: -200, duration: 2000, ease: ease_mode },
        true,
    ]);
});

[
'linear',
'easeInQuad',
'easeOutQuad',
'easeInOutQuad',
'easeInCubic',
'easeOutCubic',
'easeInOutCubic',
'easeInQuart',
'easeOutQuart',
'easeInOutQuart',
'easeInQuint',
'easeOutQuint',
'easeInOutQuint'].map((ease_mode, i) => {
    let div = document.createElement('div');
    div.className = 'smallbox selev';
    div.style.top = (i * (20 + 4)) + 'px';
    document.getElementById('box11').appendChild(div);
    div.innerText = ease_mode;
    Knimation(div, [
        { left: 200, duration: 2000, ease: ease_mode },
        { left: -200, duration: 2000, ease: ease_mode },
        true,
    ]);
});

<div id="box12" class="selev"></div>

<div id="box12" class="selev"></div>

let box = document.getElementById('box12');
Knimation(box, [
    // 이것과
    { rotate: [0, 10], duration: 500 },
    { rotate: [10, 0], duration: 500 },

    // 이것은 같은 작동을 합니다
    { rotate: 30, duration: 500 },
    { rotate: -30, duration: 500 },
    true,
]);

let box = document.getElementById('box12');
Knimation(box, [
    // 이것과
    { rotate: [0, 10], duration: 500 },
    { rotate: [10, 0], duration: 500 },

    // 이것은 같은 작동을 합니다
    { rotate: 30, duration: 500 },
    { rotate: -30, duration: 500 },
    true,
]);

<div id="box13" class="selev"></div>

<div id="box13" class="selev"></div>

let box = document.getElementById('box13');
Knimation(box, [
    // 현재 스케일 크기에 0.5 를 더한다
    { scale: 0.5, duration: 1000 },

    // 현재 스케일 크기에 -1 을 더한다
    { scale: -1, duration: 1000 },

    // 현재 스케일크기 무관하게 0에서 1로 변환한다
    { scale: [0, 1], duration: 1000 },

    //무한루프
    true

]);

let box = document.getElementById('box13');
Knimation(box, [
    // 현재 스케일 크기에 0.5 를 더한다
    { scale: 0.5, duration: 1000 },

    // 현재 스케일 크기에 -1 을 더한다
    { scale: -1, duration: 1000 },

    // 현재 스케일크기 무관하게 0에서 1로 변환한다
    { scale: [0, 1], duration: 1000 },

    //무한루프
    true

]);

<div id="box14" class="selev"></div>

<div id="box14" class="selev"></div>

let box = document.getElementById('box14');
Knimation(box, [
    { scale: 0.5, duration: 1000 },
    r=>{
        // r 는 함수입니다 (Promise 에서 resolve)
        // 여기에서 r() 이렇게 실행해주지 않으면 다음 스케쥴로 넘어가지 않습니다
        // AJAX 등의 비동기적 처리 이후에 r() 해서 다음 스케쥴로 넘어가도록 처리하면 됩니다
        setTimeout(()=>{
            r();
        },1000);
    },
    { scale: -1, duration: 1000 },
]);

let box = document.getElementById('box14');
Knimation(box, [
    { scale: 0.5, duration: 1000 },
    r=>{
        // r 는 함수입니다 (Promise 에서 resolve)
        // 여기에서 r() 이렇게 실행해주지 않으면 다음 스케쥴로 넘어가지 않습니다
        // AJAX 등의 비동기적 처리 이후에 r() 해서 다음 스케쥴로 넘어가도록 처리하면 됩니다
        setTimeout(()=>{
            r();
        },1000);
    },
    { scale: -1, duration: 1000 },
]);

<div id="box15" class="selev"></div>

<div id="box15" class="selev"></div>

let box = document.getElementById('box15');
Knimation(box, [
    // everyframe 키로 함수를 전달하게 되면
    // 매 프레임마다 이 함수를 실행하며 이 함수는 p 라는 인자를 받습니다
    // p는 함수이며 인자로는 숫자 두개가 들어갑니다
    // p(100,110) 이렇게 넣어주게되면 총 duration이 1000이고 현재 300이 지났다면 103을 리턴해줍니다
    // 만약 ease 가 적용된 경우라면 그에 맞는 값을 내어줍니다
    { top: 100, duration: 4000, everyframe: p=>{

        box.innerText = p(100, 110);

        // 이렇게 응용
        let red = p(0, 255);
        box.style.backgroundColor = `rgb(${red}, 115, 220)`;

    } },
    { top: -100, duration: 500 },
    true
]);

let box = document.getElementById('box15');
Knimation(box, [
    // everyframe 키로 함수를 전달하게 되면
    // 매 프레임마다 이 함수를 실행하며 이 함수는 p 라는 인자를 받습니다
    // p는 함수이며 인자로는 숫자 두개가 들어갑니다
    // p(100,110) 이렇게 넣어주게되면 총 duration이 1000이고 현재 300이 지났다면 103을 리턴해줍니다
    // 만약 ease 가 적용된 경우라면 그에 맞는 값을 내어줍니다
    { top: 100, duration: 4000, everyframe: p=>{

        box.innerText = p(100, 110);

        // 이렇게 응용
        let red = p(0, 255);
        box.style.backgroundColor = `rgb(${red}, 115, 220)`;

    } },
    { top: -100, duration: 500 },
    true
]);

<div id="box16" class="selev"></div>

<div id="box16" class="selev"></div>

let box = document.getElementById('box16');
Knimation(box, [
    // 이렇게 숫자를 스케쥴 사이에 넣어주게되면 해당 숫자시간만큼 딜레이합니다
    // 1000 은 1초입니다
    1000,
    { top: 100, duration: 500 },
    1000,
    { top: -100, duration: 500 },
    true
]);

let box = document.getElementById('box16');
Knimation(box, [
    // 이렇게 숫자를 스케쥴 사이에 넣어주게되면 해당 숫자시간만큼 딜레이합니다
    // 1000 은 1초입니다
    1000,
    { top: 100, duration: 500 },
    1000,
    { top: -100, duration: 500 },
    true
]);

<div id="box17" class="selev"></div>

<div id="box17" class="selev"></div>

let box = document.getElementById('box17');
Knimation(box, [
    { top: 100, duration: 500 },
    { rotate: 90, duration: 500 },
    { rotate: -90, duration: 500 },
    { top: -100, duration: 500, goto: 0 },
    // goto 에 숫자를 주면 해당 애니메이션 종료 후 해당 숫자에 해당하는 순서의 스케쥴로 이동합니다
    // 즉 0번째로 이동하게됩니다.
    // 따라서 5번째인 left: 100 스케쥴로는 영원히 가지 않습니다
    // 그리고 무한으로 반복됩니다
    
    { left: 100, duration: 500 }
]);

let box = document.getElementById('box17');
Knimation(box, [
    { top: 100, duration: 500 },
    { rotate: 90, duration: 500 },
    { rotate: -90, duration: 500 },
    { top: -100, duration: 500, goto: 0 },
    // goto 에 숫자를 주면 해당 애니메이션 종료 후 해당 숫자에 해당하는 순서의 스케쥴로 이동합니다
    // 즉 0번째로 이동하게됩니다.
    // 따라서 5번째인 left: 100 스케쥴로는 영원히 가지 않습니다
    // 그리고 무한으로 반복됩니다

    { left: 100, duration: 500 }
]);

<div id="box18" class="selev"></div>

<div id="box18" class="selev"></div>

let box = document.getElementById('box18');
Knimation(box, [
    // 이렇게 스케쥴에 함수를 넣어 r(2) 이렇게 해주면
    // 2번째 스케쥴로 이동합니다
    // r(-1) 이렇게 해주면 가장 마지막 것으로 이동
    // r(-2) 이렇게 해주면 마지막에서 두번째 것으로 이동
    r => {
        r(2);
    },
    { left: 100 },
    { top: 100 },
    { opacity: [1, 0.5] },
]);

let box = document.getElementById('box18');
Knimation(box, [
    // 이렇게 스케쥴에 함수를 넣어 r(2) 이렇게 해주면
    // 2번째 스케쥴로 이동합니다
    // r(-1) 이렇게 해주면 가장 마지막 것으로 이동
    // r(-2) 이렇게 해주면 마지막에서 두번째 것으로 이동
    r => {
        r(2);
    },
    { left: 100 },
    { top: 100 },
    { opacity: [1, 0.5] },
]);

<div id="box19" class="selev"></div>

<div id="box19" class="selev"></div>

let box = document.getElementById('box19');
Knimation(box, [
    // 이렇게 표현해주면 10회 반복합니다
    "<@loop:10>", // 루프시작
    { opacity: -1, rotate:10, duration:50 },
    { opacity: 1, duration:50 },
    (r,i)=>{
        // 현재 회차에 대한 값을 이렇게 참조할 수 있습니다
        box.innerText = i.loop;
        r();
    },
    "</@loop>", // 루프끝
    1000, // 1초 쉬고
    true, // 다시 처음으로
]);

let box = document.getElementById('box19');
Knimation(box, [
    // 이렇게 표현해주면 10회 반복합니다
    "<@loop:10>", // 루프시작
    { opacity: -1, rotate:10, duration:50 },
    { opacity: 1, duration:50 },
    (r,i)=>{
        // 현재 회차에 대한 값을 이렇게 참조할 수 있습니다
        box.innerText = i.loop;
        r();
    },
    "<"+"/@loop>", // 루프끝
    1000, // 1초 쉬고
    true, // 다시 처음으로
]);

<div id="box20" class="selev"></div>
<div id="box21" style="left:100px;" class="selev"></div>

<div id="box20" class="selev"></div>
<div id="box21" style="left:100px;" class="selev"></div>

let box = document.getElementById('box20');
let box2 = document.getElementById('box21');
// 여러개의 엘리먼트를 []에 담아서 함께 일괄적용 가능합니다
Knimation([box, box2], [
    { opacity: -1, rotate:10, duration: 500 },
    { opacity: 1, duration: 500 },
    true,
]);

let box = document.getElementById('box20');
let box2 = document.getElementById('box21');
// 여러개의 엘리먼트를 []에 담아서 함께 일괄적용 가능합니다
Knimation([box, box2], [
    { opacity: -1, rotate:10, duration: 500 },
    { opacity: 1, duration: 500 },
    true,
]);