LZ-Says：路是自己走得，好坏自己都要走下去~只要自己认为是对的~！！！
前言
针对上篇 Android Study 之 属性动画初识 ，我们实现一个小效果，
分析
基于上面的gif图，我们简要分析下，如果要实现上面的骚操作，我们改怎么做？
首先，点击显示按钮，背景首先执行翻转动画，接着开启透明动画，最后开启缩放动画。
那么，基于以上分析我们开始着手实践。
开搞 谁知道 有没有坑 ^_^
首先搭建我们的布局，很是easy，相对布局中承载俩个ImageView以及Button，如下：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.hlq.animalsafari.MainActivity"> <android.support.v7.widget.LinearLayoutCompat android:id="@+id/ll_first" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/icon_2" android:orientation="vertical"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="getStartFirstAnimation" android:text="显示" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="getOut" android:text="跳转下一页" /> </android.support.v7.widget.LinearLayoutCompat> <ImageView android:id="@+id/iv_second" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:clickable="true" android:onClick="getStartSecondAnimation" android:scaleType="fitEnd" android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/icon_1" android:visibility="gone" /></RelativeLayout>
然后就是我们刚才分析的动画实现，首先必须要明确一点：
动画，同步执行！！！
再次进行明确流程：
首先进行翻转，而翻转的角度是以X轴的角度进行翻转，同时进行透明度的变换，同时进行X，Y轴缩放，最后我们需要将翻转后再次回归原来，也就是翻转到原来的正常角度
// 翻转 ObjectAnimator rotationX = ObjectAnimator.ofFloat(mFirstView, "rotationX", 0f, 25f); rotationX.setDuration(300); // 透明 ObjectAnimator alpha = ObjectAnimator.ofFloat(mFirstView, "alpha", 1f, 0.5f); alpha.setDuration(200); // 缩放 ObjectAnimator scaleX = ObjectAnimator.ofFloat(mFirstView, "scaleX", 1f, 0.8f); scaleX.setDuration(300); ObjectAnimator scaleY = ObjectAnimator.ofFloat(mFirstView, "scaleY", 1f, 0.8f); scaleY.setDuration(300); ObjectAnimator resumeRotationX = ObjectAnimator.ofFloat(mFirstView, "rotationX", 25f, 0f); resumeRotationX.setDuration(200); // 延迟执行 resumeRotationX.setStartDelay(200); AnimatorSet set = new AnimatorSet(); set.playTogether(rotationX, alpha, scaleX, scaleY, resumeRotationX); set.start();
我们一起来看看效果，看看是否达到预期这里为什么会出现了上下空白呢？按照原有的效果，应该顶上去才对，那么是哪儿引发的问题呢？
回顾上面，是由于我们缩放导致据屏幕上方约有百分之10的距离，为什么这么说呢？
是因为我们刚才X，Y各自缩放当前百分之80，也就是上下空白各占百分之十。
那么到这里，大家或许心中有了写解决之道。
我们设置一个Y轴平移不就好了么？
So，修改后代码如下：
// 由于缩放造成 离顶部有一段距离 需要平移上去 ObjectAnimator translationY = ObjectAnimator.ofFloat(mFirstView, "translationY", 0f, -0.1f * mFirstView.getHeight()); translationY.setDuration(200);
别忘记将此平移效果添加同步执行中哦~
set.playTogether(rotationX, alpha, scaleX, scaleY, resumeRotationX, translationY);
现在的效果是不是完成了小一半？
而接下来，我们只需要在点击的时候，将Image 2 显示并平移上来即可。
// 第二个view执行平移动画 往上
ObjectAnimator secondTranslationY = ObjectAnimator.ofFloat(mSecondView, "translationY", mSecondView.getHeight(), 0f);
secondTranslationY.setDuration(200);
secondTranslationY.addListener(new AnimatorListenerAdapter() { @Override
public void onAnimationStart(Animator animation) {
mSecondView.setVisibility(View.VISIBLE);
}
});同时，别忘记添加同步执行：
set.playTogether(rotationX, alpha, scaleX, scaleY, resumeRotationX, translationY, secondTranslationY);
那么，如何实现点击image 2的时候，image 1呈现呢？
首先我们需要分析下此时动画的执行，我们是不是只需要将image 1过渡到image 2的动画部分反转即可？
代码稍作修改，如下：
private void getAnimationStart() { // 翻转
ObjectAnimator rotationX = ObjectAnimator.ofFloat(mFirstView, "rotationX", 0f, 25f);
rotationX.setDuration(300); // 透明
ObjectAnimator alpha = ObjectAnimator.ofFloat(mFirstView, "alpha", 0.5f, 1f);
alpha.setDuration(200); // 缩放
ObjectAnimator scaleX = ObjectAnimator.ofFloat(mFirstView, "scaleX", 0.8f, 1f);
scaleX.setDuration(300);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(mFirstView, "scaleY", 0.8f, 1f);
scaleY.setDuration(300);// rotationX.addUpdateListener();
ObjectAnimator resumeRotationX = ObjectAnimator.ofFloat(mFirstView, "rotationX", 25f, 0f);
resumeRotationX.setDuration(200); // 延迟执行
resumeRotationX.setStartDelay(200); // 由于缩放造成 离顶部有一段距离 需要平移上去
ObjectAnimator translationY = ObjectAnimator.ofFloat(mFirstView, "translationY", -0.1f * mSecondView.getHeight(), 0f);
translationY.setDuration(200); // 第二个view执行平移动画 往上
ObjectAnimator secondTranslationY = ObjectAnimator.ofFloat(mSecondView, "translationY", mSecondView.getHeight(), 0f);
secondTranslationY.setDuration(200);
secondTranslationY.addListener(new AnimatorListenerAdapter() {
@Override public void onAnimationStart(Animator animation) {
mSecondView.setVisibility(View.GONE);
}
});
AnimatorSet set = new AnimatorSet(); set.playTogether(rotationX, alpha, scaleX, scaleY, resumeRotationX, translationY, secondTranslationY); set.start();
}这样，就实现了我们文章开头显示的效果。
实现的过程很是easy，主要就是通过对动画的组合实现，还有就是实现过程还是需要大家稍微思考下。
而下面，则为大家进行一点拓展。
拓展 Material Design 动画
Material Design，也就是Android 5.0 推出，确实有着nice的效果，也确确实实颠覆了以往Android的印象。
nice的效果中，不乏包含一些好看的效果，比如水波纹效果或者揭露效果。
那么如上这俩种，具体我们又该如何玩转呢？
由于比较easy，这里LZ主要以代码为主：
水波纹，Android 5.0 自带特效，当然你可以引用系统定义好的，直接当作BackGround使用。
But，这里需要注意，使用系统之后，显示效果就是大白，如上图，一个为有边界一个无边界，随便浪。
<Button android:layout_width="match_parent" android:layout_height="80dp" /> <Button android:layout_width="match_parent" android:layout_height="80dp" android:background="?attr/selectableItemBackground" /> <Button android:layout_width="match_parent" android:layout_height="80dp" android:background="?attr/selectableItemBackgroundBorderless" />
当然，你可以不使用background，而是直接在style进行配置，如下：
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorControlHighlight">@color/colorPrimaryDark</item> <item name="colorButtonNormal">@color/material_blue_grey_800</item> </style>
需要注意的是，这个style位于21包下，针对5.0作的兼容。
而关于gif图中关于揭露效果，更是nice+easy~
我们只需要使用提供好的API(ViewAnimationUtils)即可实现，分分钟，首先简单说明api使用如下：
ViewAnimationUtils.createCircularReveal( view, //作用在哪个View上面 centerX, centerY, //扩散的中心点 startRadius, //开始扩散初始半径 endRadius)//扩散结束半径
其次附上源码：
public void getSelectable(View view) {
Animator circularReveal = ViewAnimationUtils.createCircularReveal(view,
view.getWidth() / 2, view.getHeight() / 2, 0, view.getWidth());
circularReveal.setDuration(1500);
circularReveal.setInterpolator(new AccelerateInterpolator());
circularReveal.start();
} public void getSelectable1(View view) {
Animator circularReveal = ViewAnimationUtils.createCircularReveal(view, 0, 0, 0, (float) Math.hypot(view.getWidth(), view.getHeight()));
circularReveal.setDuration(1500);
circularReveal.setInterpolator(new AccelerateInterpolator());
circularReveal.start();
}
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦