Georgiy Shur: Bring onboarding to life
?
0 likes?112 views
This document discusses using ViewPager-based animations for onboarding screens in Android apps. It describes using ViewPager offsets and animating properties like position, scale and color to create interactive transitions between onboarding pages. Code samples are provided to implement animations using libraries like SparkleMotion and Spritz when swiping between pages in a ViewPager. Resources for further reading on ViewPager animations are also listed.
Georgiy Shur: Bring onboarding to life
- 2. GEORGIY SHUR Android Developer, Ackee
- 3. Bring onboarding to life with ViewPager-based animations
- 4. Onboarding techniques ¡ñ Walkthroughs and tours ¡ñ Contextual tips and tutorials ¡ñ Empty states ¡ñ Dummy data, chatbots, etc....
- 5. Onboarding techniques ¡ñ Walkthroughs and tours ¡ñ Contextual tips and tutorials ¡ñ Empty states ¡ñ Dummy data, chatbots, etc....
- 6. Onboarding techniques ¡ñ Walkthroughs and tours ¡ñ Contextual tips and tutorials ¡ñ Empty states ¡ñ Dummy data, chatbots, etc....
- 7. Onboarding techniques ¡ñ Walkthroughs and tours ¡ñ Contextual tips and tutorials ¡ñ Empty states ¡ñ Dummy data, chatbots, etc....
- 8. Onboarding techniques ¡ñ Walkthroughs and tours ¡ñ Contextual tips and tutorials ¡ñ Empty states ¡ñ Dummy data, chatbots, etc....
- 9. Onboarding techniques ¡ñ Walkthroughs and tours ¡ñ Contextual tips and tutorials ¡ñ Empty states ¡ñ Dummy data, chatbots, etc....
- 10. Static screens are boring? ¡ñ Animated ¡ñ Interactive
- 11. ViewPager-based animations concept ¡ñ Offset between pages
- 12. ViewPager-based animations concept ¡ñ Offset between pages ¡ñ Parameter to animate (position, scale, color, ¡)
- 13. ViewPager-based animations concept ¡ñ Offset between pages ¡ñ Parameter to animate (position, scale, color, ¡) ¡ñ Relation between them (linear, ¡)
- 14. ViewPager-based animations concept ¡ñ Offset between pages ¡ñ Parameter to animate (position, scale, color, ¡) ¡ñ Relation between them (linear, ¡) ¡ñ Pages involved
- 15. Between pages 1 and 2 I want to change x position of view with relation x = offset/2
- 16. Parameters to animate ¡ñ Position (translation) ¡ñ Angle (rotation) ¡ñ Scale (size) ¡ñ Color ¡ñ Alpha (fade in/out) ¡ñ Progress (GIF, Lottie view) ¡ñ Custom, ...
- 18. private void initHandWithPhone() { ImageView hand = (ImageView) LayoutInflater. from(mPagerLayout.getContext()) .inflate(R.layout. decor_hand_with_phone, mPagerLayout, false); Decor handDecor = new Decor.Builder(hand).setPage(Page. pageRange(2, 3)) .behindViewPage().withLayer().build(); RotationAnimation handRotateInAnim = new RotationAnimation(Page. singlePage(2), 30, 0); handRotateInAnim.setInterpolator( new DecelerateInterpolator()); TranslationAnimation handMoveInAnim = new TranslationAnimation(Page. singlePage(2), mCircleRadius + hand.getDrawable().getIntrinsicWidth() / 2, -UiUtils. dpToPx(this, 16), UiUtils. dpToPx(this, 28), 0, true); handMoveInAnim.setInterpolator( new DecelerateInterpolator()); RotationAnimation handRotateOutAnim = new RotationAnimation(Page. singlePage(3), 0, -60); TranslationAnimation handMoveOutAnim = new TranslationAnimation(Page. singlePage(3), UiUtils. dpToPx(this, 28), 0, - mCircleRadius - hand.getDrawable().getIntrinsicWidth() / 2, UiUtils. dpToPx(this, 166), true); mSparkleMotion.animate(handRotateInAnim).animate(handMoveInAnim) .animate(handRotateOutAnim).animate(handMoveOutAnim).on(handDecor); }
- 19. ImageView hand = (ImageView) LayoutInflater .from(mPagerLayout.getContext()) .inflate(R.layout.decor_hand_with_phone, mPagerLayout, false); Decor handDecor = new Decor.Builder(hand) .setPage(Page.pageRange(2, 3)) .behindViewPage().withLayer().build();
- 20. RotationAnimation handRotateInAnim = new RotationAnimation(Page.singlePage(2), 30, 0); handRotateInAnim.setInterpolator(new DecelerateInterpolator()); TranslationAnimation handMoveInAnim = new TranslationAnimation( Page.singlePage(2), mCircleRadius + hand.getDrawable().getIntrinsicWidth() / 2, -UiUtils.dpToPx(this, 16), UiUtils.dpToPx(this, 28), 0, true); handMoveInAnim.setInterpolator(new DecelerateInterpolator());
- 21. RotationAnimation handRotateOutAnim = new RotationAnimation(Page.singlePage(3), 0, -60); TranslationAnimation handMoveOutAnim = new TranslationAnimation(Page.singlePage(3), UiUtils.dpToPx(this, 28), 0, -mCircleRadius - hand.getDrawable().getIntrinsicWidth() / 2, UiUtils.dpToPx(this, 166), true);
- 23. class CustomPageTransformer : ViewPager.PageTransformer { override fun transformPage(view: View, position: Float) { with(view.find<Button>(R.id.btn_first)) { alpha = position translationX = -(1 - position) * 1.4f * view.width } with(view.find<Button>(R.id.btn_second)) { alpha = position translationX = -(1 - position) * 1.6f * view.width } } }
- 24. val spritz = Spritz .with(lottieAnimationView) .withSteps( SpritzStep.Builder() .withAutoPlayDuration(500, TimeUnit.MILLISECONDS) .withSwipeDuration(500, TimeUnit.MILLISECONDS) .build(), SpritzStep.Builder() .withAutoPlayDuration(500, TimeUnit.MILLISECONDS) .withSwipeDuration(500, TimeUnit.MILLISECONDS) .build(), SpritzStep.Builder() .withAutoPlayDuration(500, TimeUnit.MILLISECONDS) .build() ) .build()
- 25. override fun onStart() { super.onStart() spritz.attachTo(viewPager) spritz.startPendingAnimations() } override fun onStop() { spritz.detachFrom(viewPager) super.onStop() }