옛날 옛적에

게이미피케이션에서는 온보딩이라고 하는 분야에는 처음 사용자들에게 어플리케이션을 어떻게 쓸지 알려주는 부분들을 많이 포함하죠.

2016/03/05 editor’s choice

Intro.js
_Intro.js is a free and open-source library, however, if you are using the library for your business you can subscribe…_introjs.com

온보딩

웹 어플리케이션을 만들고 나면 사용자들이 좀더 손쉽게 만들게 하기 위해, 혹은 처음의 좋은 경험을 주기 위해 튜토리알들을 할 수 있도록 해주는 라이브러리 intro.js 입니다.

데모

Basic usage
_Intro.js - Better introductions for websites and features with a step-by-step guide for your projects._introjs.com

데모 페이지에서 바로 확인해 볼 수도 있고 페이지에 직접 들어가도 확인해 볼 수 있는 점은 장점이죠.

설치

$npm install intro.js — save

실행

1. 소스 임포트 : CDN에 있는 js 와 css를 바로 임포트를 하거나 npm 이나 git으로 다운받은 js와css경로를 import 합니다.
2. html 태그에 data-intro, data-step 같은 attribute들을 삽입합니다.

3. 실행 명령어를 실행시켜 줍니다.

진군!

Swift 가 대세이긴 한 모양입니다. 깃헙에서는 Swift로 만들어진 프로젝트들이 연일 히트를 치고 있네요. Advance 는 Swift만으로 만들어진 animation 프레임워크입니다. 물리 기반으로 반응한다고 하니, 제스쳐에 대해 잘 반응하게 된다고 보면 됩니다.

Today’s best ( 950 ★)

storehouse/Advance
_Advance - A powerful animation framework for iOS._github.com

Interactive Design

이 프로젝트에서 강조하는 것은 interactive design 인데, Steve Jobs가 아이폰을 처음 발표할 시절 스크롤에 가속도를 적용했을 때에 사람들의 반응을 생각해 보면 어떤 철학을 가지고 이 프레임워크를 만들었는지 이해가 될 것입니다.

16분 9초.

장점

• 물리적인 행동에 따라 움직이는 제스쳐 기반의 애니메이션을 만들수 있습니다.

• 프레임 별로 애니메이션을 실행하고 콜백을 지정할 수 있습니다.

  import Advance

  0.0.animateTo(3.0, duration: 2.0, timingFunction: LinearTimingFunction()) { (value) in
  print(“value: \(value)”)
  // Do something with value
  }

• 확장이 용이합니다.

Documentaion

API 페이지가 존재합니다.

링크 : http://storehouse.github.io/Advance/docs/

Interactive Animation

interactive animation에 대해서는 다음글을 읽어보면 좋습니다.

Interactive Animations
_When Steve Jobs introduced the first iPhone in 2007, the touch screen interaction had a certain kind of magic to it. A…_www.objc.io

By Keen Dev on March 3, 2016.

Exported from Medium on May 31, 2017.