Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Dmytro Danylyk] Android L Animation

[Dmytro Danylyk] Android L Animation

Presentation from GDG DevFest - the biggest Google related event in Ukraine. October 24-25, Lviv. Learn more at http://devfest.gdg.org.ua/

Google Developers Group Lviv

October 25, 2014
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

Transcript

  1. <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="New Button" android:paddingLeft="16dp" android:paddingRight="16dp"/> Android L Developer

    Preview new touch feedback mechanism. , a typically rectangular button made of paper that lifts and emits ink reactions on press.
  2. <ripple android:color="@android:color/holo_purple"> <!--mask defines the bounds for the ripple animation-->

    <item android:id="@android:id/mask"> <shape android:shape="rectangle" /> </item> </ripple> To change the default touch feedback color, of single view use ripple drawable. <Button android:background="@drawable/ripple"/> drawable/ripple.xml​​
  3. ValueAnimator anim = ViewAnimationUtils.createCircularReveal( view, centerX, centerY, startRadius, endRadius );

    The method enables you to animate a clipping circle to reveal or hide a view.
  4. Path path = new Path(); path.addCircle(x, y, radius, Path.Direction.CW); ObjectAnimator

    animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); animator.setDuration(1000); animator.start(); The class has new constructors that enable you to animate coordinates along a path.
  5. <selector> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="4" android:valueFrom="0" android:valueType="floatType"/>

    </set> </item> ... </selector> The new class lets you define animators that run when the state of a view changes. anim/selector.xml​​ <android.support.v7.widget.CardView android:stateListAnimator="@anim/selector"/>
  6. <animated-selector> <item android:state_checked="true" android:id="@+id/state_on"> <bitmap android:src="@drawable/ic_done_anim_030" /> </item> <item android:state_checked="false"

    android:id="@+id/state_off"> <bitmap android:src="@drawable/ic_plus_anim_030" /> </item> <transition android:fromId="@+id/state_on" android:toId="@+id/state_off"> <animation-list> <item android:duration="16"> <bitmap android:src="@drawable/ic_plus_anim_000" /> </item> ... </item> <item android:duration="16"> <bitmap android:src="@drawable/ic_plus_anim_030" /> </item> </animation-list> </transition> </animated-selector> drawable-v21/icon_anim.xml​​ The new class lets you create drawables that show animations between state changes of the associated view.
  7. <animation> </animation> <animation> <frame> </frame> </animation> <animation> <frame> <line x1="0"

    y1="0" x2="1" y2="1"/> </frame> </animation> <animation> <frame> <line x1="0" y1="0" x2="1" y2="1"/> <line x1="1" y1="0" x2="0" y2="1"/> </frame> </animation> <animation> <frame> <line x1="0" y1="0" x2="1" y2="1"/> <line x1="1" y1="0" x2="0" y2="1"/> </frame> <frame> <line x1="1" y1="0" x2="0.5" y2="1"/> </frame> </animation> <animation> <frame> <line x1="0" y1="0" x2="1" y2="1"/> <line x1="1" y1="0" x2="0" y2="1"/> </frame> <frame> <line x1="1" y1="0" x2="0.5" y2="1"/> <line x1="0.5" y1="1" x2="0" y2="0.5"/> </frame> </animation> *Nightly build
  8. <style name="BaseAppTheme" parent="android:Theme.Material.Light"> <item name="android:windowContentTransitions">true</item> <item name="android:windowEnterTransition">@transition/fade</item> <item name="android:windowExitTransition">@transition/fade</item> </style>

    values-v21/styles.xml​​ - moves views in or out of the scene. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); getWindow().setEnterTransition(new Explode()); getWindow().setExitTransition(new Explode()); } xml programmatically - moves views in or out from one of the edges of the scene. - moves views in or out from the center of the scene.
  9. A determines how views that are shared between two activities

    transition between these activities. - animates the changes in clip bounds of target views. - animates the changes in layout bounds of target views. - animates the changes in scale and rotation of target views. - animates changes in size and scale type for an image view.
  10. To make a screen transition animation between two activities that

    have a shared element: 1. Enable window content transitions in your style. <item name="android:windowContentTransitions">true</item> <item name="android:windowSharedElementEnterTransition">@transition/move_image</item> <item name="android:windowSharedElementExitTransition">@transition/move_image</item> 2. Specify a shared elements transition in your style. <moveImage/> transition/move_image.xml
  11. 4. Use the method. <ImageView android:id="@+id/photo" android:viewName="photo_hero" /> 3. Assign

    a common name to the shared elements in both layouts with the attribute. ImageView hero = (ImageView) findViewById(R.id.photo); ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, hero, "photo_hero"); startActivity(intent, options.toBundle()); 5. Set image view source inside Details Activity method.
  12. // Check if we're running on Android 5.0 or higher

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Call some material design APIs here } else { // Implement this feature without material design } Activity transitions Touch feedback Reveal animations Path-based animations Animated selectors Vector drawables