이러다 곧 manga도 나오겠네용

javascript animation 프레임 워크 입니다. 아직 엄청나게 많은 기능을 제공하는 수준은 아닙니다만, 가볍고 빠르게 동작하는 것이 특징입니다.

2016/06/28 Editor’s choice

juliangarnier/anime
_anime - Polyvalent yet lightweight Javascript animation library_github.com

설치는 그냥 프로젝트에 소스가 존해하고 min파일까지 제공하고 있습니다. 별도의 작업 없이 사용할수 있습니다.

var myAnimation = anime({  
targets: \['.blue', '.green'\],  
translateX: '13rem',  
rotate: 180,  
borderRadius: 8,  
duration: 2000,  
loop: true  
});

간단하게 애니메이션이 구현 됩니다.

제가 가장 재밌게 본 것은 SVG 의 path를 따라 그려주는 것인데,

불꽃을 한번 따라서 구현해 봤습니다.

결과는 위의 그림과 같고 소스는 다음과 같습니다.

javascript

var path = anime.path('path');

anime({  
targets: 'rect',  
translateX: path,  
translateY: path,  
rotate: path,  
duration: 3000,  
loop: true,  
easing: 'linear'  
});

anime({  
targets: 'path',  
opacity: 0,  
duration: 6000,  
loop: true,  
direction: 'alternate',  
easing: 'easeInOutExpo'  
});

SVG

<section\>  
<article\>  
<svg width="512" height="512" viewBox="0 0 512 512"\>  
<path d="M223.899,32c25.691,145--96.732,142--95.895,288c0.686,119.51,104.975,160,128.143,160c23.166,0,113.88--26,126.931--160  
C393.711,210.816,310.572,96,223.899,32z M256.147,472c0,0--40.701--35.816--40.701--80c0--44.183,40.555--80,40.555--80  
s40.332,35.817,40.332,80C296.332,436.184,256.147,472,256.147,472z M367.153,318.449c-2.823,28.988--9.704,54.523--20.45,75.894  
c-8.749,17.397--20.084,32.114--33.692,43.743c-6.522,5.575--13.255,10.115--19.771,13.749c10.039--15.938,19.093--36.72,19.093--59.835  
c0--50.788--43.842--90.307--45.708--91.963l-10.594--9.41l-10.621,9.381c-1.877,1.657--45.963,41.178--45.963,91.992  
c0,21.842,8.168,41.594,17.636,57.152c-7.381--4.326--15.215--9.748--22.986--16.451c-14.688--12.67--26.365--27.608--34.708--44.402  
c-10.063--20.255--15.239--43.265--15.383--68.391c-0.367--63.986,24.09--95.746,49.983--129.369c24.568--31.903,49.829--64.7,49.458--122.113  
c32.513,28.827,61.257,63.03,82.822,98.877C357.576,219.35,371.715,271.615,367.153,318.449z"/\>  
<rect fill="\#38FF9B" width="16" height="16" x="-8" y="-8"/\>  
</svg\>  
</article\>  
<footer\>  
<span\>Made with</span\> <a href="[http://anime-js.com][anchor2]"\>anime.js</a\>  
</footer\>  
<a class="logo" href="[http://anime-js.com][anchor2]"\><img src="[https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/anime-logo.png][anchor3]"\></img\></a\>  
</section\>

By Keen Dev on June 27, 2016.

Exported from Medium on May 31, 2017.

step by step view

Android 에서 타임라인을 구현하고 싶은데 UI 때문에 고민이신 분들을 위해서 좋은 프로젝트입니다.

2016/06/27 Editor’s choice

baoyachi/StepView
_StepView - Step by step，just use stepviewIndicator，step indicator，flow indicator，timeline，order process，express status_github.com

중국어로만 되어 있는데, 활용하기 어렵지는 않습니다.

평행뷰

HorizontalStepView setpview0 = (HorizontalStepView) mView.findViewById(R.id._step\_view0_);  
List<String\> list0 = new ArrayList<\>();  
list0.add("接单");  
list0.add("打包");  
list0.add("出发");  
list0.add("送单");  
list0.add("完成");  
list0.add("支付");

HorizontalStepView 를 활용해서 View를 가지고 와서 list에 add 해 주면 됩니다.

실행해보기

왕좌의 게임 세계관- 통합 역사
_왕좌의 게임은 세계관의 역사에 대한 대략적인 개념이 잡혀있어야 훨씬 이해하기 쉬운 미드입니다. 대사에서도 계속 옛날의 왕이나 오래전에 있었던 마법들에 대한 언급이 나오기 때문에 멍때리지 않고 잘 이해할 수 있습니…_realpoliticia.tistory.com

오늘은 왕좌의 게임을 보다가 이 스크립트로 한번 만들어 보기로 했습니다.

mSetpview0 = (VerticalStepView) mView.findViewById(R.id._step\_view0_);  

List<String\> list0 = new ArrayList<\>();  
list0.add("옛날에 Westeros의 땅에는 원주민들이 평화롭게 살고 있었어요.");  
list0.add("이 원주민들은 'Children of the forest' 혹은 '숲의 아이들'이라고 불려졌어요.");  
list0.add("그러다가 어느 날 Westeros 대륙에 'First men'(퍼스트 맨) 이라 불리는 사람들이 발을 들였어요.");  
list0.add("그들은 '숲의 아이들'을 보고 겉보기에는 키도 작고 미개한 종족 이라고 생각했어요.");  
list0.add("그러나 이 '숲의 아이들'은 강력한 고대 마법에 능통한 무시무시한 종족 이였어요.");  
list0.add("이 '숲의 아이들'은 강력한 마법으로 퍼스트 맨을 농락했어요.");  
list0.add("그리고 특이하게 숲의 아이들은 나무에 인간 얼굴 모양을 세겨놓는 종교적 풍습이 있었어요. 퍼스트 맨은 이것이 아니꼬왔는지 보이는 나무는 나무대로 모두 잘라내버렸어요.");  
list0.add("그리하여서 숲의 아이들과 퍼스트 맨의 치열한 전쟁이 일어납니다.");  
list0.add("결국 퍼스트 맨은 숲의 아이들의 종교적 풍습을 받아들이고 두 종족은 평화 협정을 맺어 전쟁을 종결 시킵니다.");  
list0.add("그리고 그후에 퍼스트 맨과 숲의 아이들은 같이 북쪽에서 내려온 아더(Others) 혹은 화이트 워커(White walkers)라고 불리는 무시무시한 좀비 비슷무리한 종족을 다시 북쪽 멀리로 쫓아냅니다.");  
list0.add("네, 얘네가 화이트 워커(White Walkers) 입니다.");  
list0.add("그렇게 화이트 워커를 모두 쫓아낸 이후, 건축가 브랜든 스타크는 거대한 얼음벽인 'The Wall'을 만듭니다. ");  
list0.add("이 브랜든 스타크가 스타크 가문의 시초입니다.");  
list0.add("발레리아에서 용을 타고 Westeros 대륙에 타게리언(Targaryen)이라는 이름의 가문이 내려옵니다. 하나 재미있는 점은 타게리언 가문이 '용'을 타고 내려왔다는 겁니다.");  
mSetpview0.setStepsViewIndicatorComplectingPosition(list0.size() - 2).setStepViewTexts(list0)//总步骤  
.setStepsViewIndicatorCompletedLineColor(ContextCompat._getColor_(getActivity(), android.R.color._white_))//设置StepsViewIndicator完成线的颜色  
.setStepsViewIndicatorUnCompletedLineColor(ContextCompat._getColor_(getActivity(), R.color._uncompleted\_text\_color_))//设置StepsViewIndicator未完成线的颜色  
.setStepViewComplectedTextColor(ContextCompat._getColor_(getActivity(), android.R.color._white_))//设置StepsView text完成线的颜色  
.setStepViewUnComplectedTextColor(ContextCompat._getColor_(getActivity(), R.color._uncompleted\_text\_color_))//设置StepsView text未完成线的颜色  
.setStepsViewIndicatorCompleteIcon(ContextCompat._getDrawable_(getActivity(), R.drawable._complted_))//设置StepsViewIndicator CompleteIcon  
.setStepsViewIndicatorDefaultIcon(ContextCompat._getDrawable_(getActivity(), R.drawable._default\_icon_))//设置StepsViewIndicator DefaultIcon  
.setStepsViewIndicatorAttentionIcon(ContextCompat._getDrawable_(getActivity(), R.drawable._attention_));//设置StepsViewIndicator AttentionIcon

실행을 하면

이런 좋은 연대기 프로그램이 완성 됩니다. 짜잔.

참 쉽죠잉?

By Keen Dev on June 27, 2016.

Exported from Medium on May 31, 2017.