Share Element

The transition from a picture to an interface is suitable for shopping cart picture to jump directly to the product details interface, and the transition of the circular button can also be applied to the circular menu







share.gif

Realize the principle of

Using the method provided by Android 5.0, to achieve the transition of shared element animation, the implementation principle is very simple, in the interface jump to add the following code

  1. Java code
/ / the first interface jump when performing Intent shareIntent = new Intent (MainActivity. This, ShareElementActivity. Class); String transitionName = getString(R.string.share_tag); ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, holder.item_image, transitionName); startActivity(shareIntent, transitionActivityOptions.toBundle());Copy the code

makeSceneTransitionAnimation(Activity activity,View sharedElement, String parameters in sharedElementName) makeSceneTransitionAnimation sharedElement is introduced into the first interface to be Shared with the second interface view elements, The sharedElementName parameter, which can be named arbitrarily, is equivalent to the tag that the system uses to locate and animate two interface elements

/ / the second animation complete callback interface to monitor and control in and out of the animation effects setEnterSharedElementCallback (ImageTransitionUtil. DEFAULT_SHARED_ELEMENT_CALLBACK);Copy the code

Can achieve what you want in setEnterSharedElementCallback animation effects

  1. Remember, the ImageView shared element in the activity must be set to the transitionName attribute. As mentioned above, this is the equivalent of a tag, and the system is based on this attribute. So make sure you set it.
   <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="@drawable/sample"
            android:transitionName="@string/share_tag"
            />
Copy the code

CollapsingToolbarLayout

Collapsible title bar, this is the animation provided by the system, reference system control is good





fold.gif

Code implementation

  1. Gradle references

The compile ‘com. Android. Support: design: 22.2.1’

  1. Java code
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_collapsing_toolbar); ButterKnife.bind(this); content.setText(R.string.content); initToolbar(); } private void initToolbar () {collapsingToolbar. SetTitle (" folding title bar "); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } @override public Boolean onOptionsItemSelected(MenuItem item) {if (item.getitemId () == android.R.id.home) { finish(); return true; } return super.onOptionsItemSelected(item); }Copy the code
  1. Layout file code
<? The XML version = "1.0" encoding = "utf-8"? > <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="300dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:title="Share Element"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/sample" android:scaleType="centerCrop" app:layout_collapseMode="parallax" App: layout_collapseParallaxMultiplier = "0.5" / > <. Android support. V7. Widget. The Toolbar android: id = "@ + id/Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:text="test" android:textColor="@color/black" android:textSize="20sp" android:padding="10dp"/> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>Copy the code

Some properties of the layout file

  1. layout_scrollFlags
    • Scroll – You have to set this if you want to scroll.
    • EnterAlways – Quick return effect that displays View (such as Toolbar) immediately when moving down.
    • ExitUntilCollapsed – Collapses View when rolling up, but can be fixed at all times.
    • EnterAlwaysCollapsed – When your View has minHeight set and this flag is used, your View enters at minimum height and expands to full height only when the scrolling View reaches the top
  2. layout_collapseMode
    • Pin-when set to this mode, the Toolbar can remain on the screen after the CollapsingToolbarLayout fully collapses.
    • Parallax – View in the CollapsingToolbarLayout can also scroll in the View, as in ImageView Set the parallax factor (and usually layout_collapseParallaxMultiplier) collocation is used.
    • Layout_collapseParallaxMultiplier (parallax factor) – set parallax scrolling factor, the value is: 0 ~ 1
  3. CollapsingToolbarLayout must be set to the Title in CollapsingToolbarLayout and will not be displayed on the Toolbar

CollapsingToolbar. SetTitle (” folding title bar “);

Reveal Animation

Google dad has paid special attention to animation effects since 5.0. Here is a ripple effect, which is also provided by the system







reveal.gif

Realize the principle of

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) private Animator animateRevealColorFromCoordinates(ViewGroup viewRoot, @ColorRes int color, int pointx, int pointY) { float finalRadius = (float) Math.hypot(viewRoot.getWidth(), viewRoot.getHeight()); // Since the toolbar is self-drawn, subtract the height pointY = pointy-toolbarheight; Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, pointx, pointY, 0, finalRadius); viewRoot.setBackgroundColor(ContextCompat.getColor(this, color)); anim.setDuration(500); anim.setInterpolator(new AccelerateDecelerateInterpolator()); anim.start(); return anim; }Copy the code
ViewAnimationUtils.createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius)

The key is that this method can be implemented by setting the View in which to draw the ripple, starting point and radius. Many open source button ripple effects are encapsulated based on this implementation

Source code below, if you feel good, help Star, Fork, is the biggest support for the author ~

Github Project address:MaterialAnim