anime.js

anime.js는 자바스크립트 애니메이션 플러그인 입니다. anime.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다.

• animejs.com
• anime-master.zip

Sample1 클릭하면 이미지가 움직이는 예제입니다.

Anime

Click

<script type="text/javascript">
	var ani1 = anime({
		targets: '.list .circle1',
		translateX: '500',
		autoplay: false
	});

	document.querySelector('.btn-wrap .btn1').onclick = ani1.play;
</script>

Sample2 움직이는 요소를 변수에 설정하는 예제입니다.

Anime

Click

<script type="text/javascript">
	var element1 = document.querySelectorAll('.list .circle2');
	
	var ani2 = anime({
		targets: element1,
		translateX: '500',
		autoplay: false
	});

	document.querySelector('.btn-wrap .btn2').onclick = ani2.play;
</script>

Sample3 여러개의 요소를 변수에 설정하는 예제입니다.

Anime

Anime

Anime

Click

<script type="text/javascript">
	var element2 = document.querySelectorAll('.list .circle3-1');
	
	var ani3 = anime({
		targets: [element2, '.list .circle3-2', '.list .circle3-3'],
		translateX: '500',
		autoplay: false
	});

	document.querySelector('.btn-wrap .btn3').onclick = ani3.play;
</script>

Sample4 CSS 속성을 적용한 예제입니다.

Anime

Click

<script type="text/javascript">
	var element2 = document.querySelectorAll('.list .circle3-1');
	
	var ani3 = anime({
		targets: [element2, '.list .circle3-2', '.list .circle3-3'],
		translateX: '500',
		autoplay: false
	});

	document.querySelector('.btn-wrap .btn3').onclick = ani3.play;
</script>

Sample5 CSS Transform 속성을 적용한 예제입니다.

Anime

Click

<script type="text/javascript">
	var ani5 = anime({
		targets: '.list .circle5',
		autoplay: false,
		translateX: 500,
		scale: 2,
		borderRadius: ['50%', '0%'],
		rotate: '1turn'
	});

	document.querySelector('.btn-wrap .btn5').onclick = ani5.play;
</script>

Sample6 오브젝트 속성을 변경하는 예제입니다.

{"prop":4,"prop2":"8%"}

Click

<script type="text/javascript">
	var myObject = {
		prop1: 0,
		prop2: '0%'
	}
	var ani6 = anime({
		targets: myObject,
		prop1: 50,
		prop2: '100%',
		easing: 'linear',
		autoplay: false,
		round: 1,
		update: function() {
			var el = document.querySelector('.circle6 span');
			el.innerHTML = JSON.stringify(myObject);
		}
	});
	document.querySelector('.btn-wrap .btn6').onclick = ani6.play;
</script>

Sample7 오브젝트 속성을 변경하는 예제입니다.

Click

<script type="text/javascript">
	var ani7 = anime({
		targets: '.circle7',
		value: 1000,
		round: 1,
		easing: 'easeInOutExpo',
		autoplay: false
	});
	document.querySelector('.btn-wrap .btn7').onclick = ani7.play;
</script>

Sample8 SVG 속성을 변경하는 예제입니다.

Click

<script type="text/javascript">
	var ani8 = anime({
		targets: '#svgAttributes polygon',
		points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
		easing: 'easeInOutExpo',
		autoplay: false
	});
	document.querySelector('.btn-wrap .btn8').onclick = ani8.play;
</script>

Sample9 SVG 속성을 변경하는 예제입니다.

Click

<script type="text/javascript">
	var ani9 = anime({
		targets: '#morphing .polymorph',
		points: [
			{ value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' },
			{ value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
			{ value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
			{ value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
		],
		easing: 'easeInOutExpo',
		duration: 2000,
		loop: true,
		autoplay: false
	});
	document.querySelector('.btn-wrap .btn9').onclick = ani9.play;
</script>

Sample10 SVG 속성을 변경하는 예제입니다.

Click

<script type="text/javascript">
	var path = anime.path('#motionPath path');

	var motionPath = anime({
		targets: '#motionPath .el',
		translateX: path('x'),
		translateY: path('y'),
		rotate: path('angle'),
		easing: 'linear',
		duration: 4000,
		loop: true,
		autoplay: false
	});

	document.querySelector('.btn-wrap .btn10').onclick = motionPath.play;
</script>