一,前言;
嗨大家好,这次的动画内容是要把前几篇微博中用到的知识综合在一起,做出一个更有难度的效果。什么效果呢?先设置两个布局,一个隐藏,一个显示;
布局(类似于前几篇文章中的iv_zhangxin图片)实现如下效果:
1. 缩小
2. 透明度
3. 旋转
4. 平移
二: 看布局
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=".MainActivity" >
<LinearLayout
android:id="@+id/ll_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff00"
android:orientation="vertical" >
<Button
android:id="@+id/bt_show"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="显示" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_hide"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentBottom="true"
android:background="#ff0000"
android:orientation="vertical"
android:visibility="invisible" >
<Button
android:id="@+id/bt_hide"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="隐藏" />
</LinearLayout>
</RelativeLayout>
三:代码
注释很详细,应该可以看的懂
package com.example.zx;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.LinearLayout;
@SuppressLint("NewApi")
public class MainActivity extends Activity implements OnClickListener {
private Button bt_show, bt_hide;
private LinearLayout ll_hide, ll_show;
private int height;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
ll_hide = (LinearLayout) findViewById(R.id.ll_hide);
// 这个方法看的不太明白不要紧,可以先跳过去
// 监听当前视图是否绘制成功
ll_hide.getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
// 视图是否绘制完成
// 已经绘制完成,回调onGloalLayout
@Override
public void onGlobalLayout() {
height = ll_hide.getHeight();
// 观察者,观察视图是否绘制完成,完成则回调下
ll_hide.getViewTreeObserver()
.removeOnGlobalLayoutListener(this);
}
});
ll_show = (LinearLayout) findViewById(R.id.ll_show);
bt_show = (Button) findViewById(R.id.bt_show);
bt_hide = (Button) findViewById(R.id.bt_hide);
bt_hide.setOnClickListener(this);
bt_show.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.bt_hide:
break;
case R.id.bt_show:
showLayout();
break;
default:
break;
}
}
private void showLayout() {
// 缩放动画
ObjectAnimator ll_show_scaleX = ObjectAnimator.ofFloat(ll_show,
"scaleX", 1.0f, 0.8f).setDuration(300);
ObjectAnimator ll_show_scaleY = ObjectAnimator.ofFloat(ll_show,
"scaleY", 1.0f, 0.8f).setDuration(300);
// 透明度
ObjectAnimator ll_show_alpha = ObjectAnimator.ofFloat(ll_show, "alpha",
1.0f, 0.5f).setDuration(300);
// 旋转,先顺时针旋转,在逆时针旋转
// 顺时针旋转20度
// 执行完旋转效果后,布局沿着X,Y轴进行了移动,就是说这个布局缩小了,不再是填充父容器,为什么出现这种情况我也搞不清楚。
ObjectAnimator ll_show_rotationX_lock = ObjectAnimator.ofFloat(ll_show,
"rotationX", 0f, 20f).setDuration(200);
ObjectAnimator ll_show_rotationX_unlock = ObjectAnimator.ofFloat(
ll_show, "rotationX", 20f, 0f).setDuration(200);
// 逆时针延迟执行,同时执行看不到动画效果
ll_show_rotationX_unlock.setStartDelay(200);
// 平移效果
// 使布局沿着y轴向上运动
ObjectAnimator ll_show_translationY = ObjectAnimator.ofFloat(ll_show,
"translationY", 0f, -30f).setDuration(300);
// 重点地方到了哦
// 下面的效果是黄色隐藏,红色显示,height为ll_hide的高度
ObjectAnimator ll_hide_translationY = ObjectAnimator.ofFloat(ll_hide,
"translationY", height, 0).setDuration(300);
// 此时,ll_hide处于隐藏状态,给ll_hide添加一个监听,当ll_hide执行的时候显示出来。
ll_hide_translationY.addListener(new AnimatorListenerAdapter() {
// 动画开始执行的时候,ll_hide显示出来
@Override
public void onAnimationStart(Animator animation) {
// TODO Auto-generated method stub
super.onAnimationStart(animation);
ll_hide.setVisibility(View.VISIBLE);
}
});
AnimatorSet animatorSet_show = new AnimatorSet();
animatorSet_show.playTogether(ll_show_scaleX, ll_show_scaleY,
ll_show_alpha, ll_show_rotationX_lock,
ll_show_rotationX_unlock, ll_show_translationY,
ll_hide_translationY);
animatorSet_show.start();
}
//隐藏功能自己实现啦
}