基于Android 系统的动画总结
由一张图片过度到一个界面,适用于购物车图片直接跳转到商品详情界面,圆形按钮的过度也可以应用于圆形菜单里
利用android 5.0 提供的方法,实现共享元素动画的过度,实现原理很简单,在界面跳转的时候加入以下代码
java代码
//第一个界面跳转的时候执行
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());
makeSceneTransitionAnimation(Activity activity,View sharedElement, String sharedElementName)
makeSceneTransitionAnimation中参数sharedElement就是传入第一个界面要与第二个界面共有的view元素,sharedElementName这个参数可以随便起名,他相当于tag,系统就是根据这个tag来定位两个界面元素的位置,然后进行动画渲染的
//第二个界面动画完成回调监听,控制进出动画效果
setEnterSharedElementCallback(ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK);
在 setEnterSharedElementCallback 里面可以实现自己想要的动画效果
布局文件代码
这里用系统自带的ImageView就可以,记住,两个界面跳转activity中的共享元素ImageView,一定要设置这个属性 transitionName 上文说过,这个就是相当于tag,系统是根据这个来定位的,所以一定要设置。
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/sample"
android:transitionName="@string/share_tag"
/>
折叠式的标题栏,这个是系统提供的动画效果,引用系统控件就好了
gradle里的引用
compile 'com.android.support:design:22.2.1'
java代码
@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("折叠式标题栏");
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
//toolbar返回事件实现
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
布局文件代码
<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.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>
layout_scrollFlags
layout_collapseMode
使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上,设置到Toolbar上不会显示
collapsingToolbar.setTitle("折叠式标题栏");
google爸爸自从5.0之后对动画效果特别注重,这里给大家介绍一个波纹效果,也是系统提供的
@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());
//由于toolbar是自己绘制的所以要减去这个高度
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;
}
重点是这个方法,设置在哪个View里绘制波纹,起始点及半径就可以实现了,很多开源的button波纹效果都是基于这个实现再次封装的