58同城页面加载效果的实现
本文继续介绍下UI相关的动效实现，带来58的数据加过渡动画。其实越是形势不好的时候越是要练习内功，我们学会思考很重要，技术也只是技术而已。
1
概述
今早 5:30 起来给人回答问题，问题是 5:12 提的我吓一跳，心里在想这世界很努力的人太多了。周三下班有一个哥们一口气问了我 3 个，他说他搞了一下午实在搞不定，我很耐心的回答了，但是三分钟能解决的问题你要搞一下午，怪不得你说你天天加班到深夜。其实越是形势不好的时候越是要练习内功，我们学会思考很重要，技术也只是技术而已。话不多说看看今天的效果：
1
实现效果
2.1 布局分析
可以看到上图可分为三部分，最上面是弹跳的几何形状图形，中间是阴影指示器，最下面是文字，所以布局用LinearLayout，最上面暂且放ImageView，中间阴影放ImageView , 最下面放玩命加载文字。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/shapeLoadingView"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="4dp" />
<ImageView
android:id="@+id/indication"
android:layout_width="23dp"
android:layout_height="3dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="82dp"
android:src="@drawable/shadow" />
<TextView
android:id="@+id/promptTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/indication"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:text="玩命加载中..."
android:textColor="#757575"
android:textSize="14sp" /></LinearLayout>2.2 组合控件 LoadingView 继承自 LinearLayout
public class LoadingView extends LinearLayout{
private ImageView mShapeLodingView,mIndicationView;
private Context mContext;
public LoadingView(Context context) {
this(context, null);
}
public LoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initLayout();
}
private void initLayout() {
View.inflate(mContext, R.layout.load_view,this);
mShapeLodingView = (ShapeLoadingView) findViewById(R.id.shapeLoadingView);
mIndicationView = (ImageView) findViewById(R.id.indication);
}
}2.3 动画分析
这里可以看做两个部分的动画，一个是上面几何图形的下落上抛动画，一个是中间阴影指示器放大缩小的动画，如果能这样组合就算实现了: 当几何图形下落时配合阴影放大，当几何图形上抛时配合中间阴影缩小。需要用到 ObjectAnimator 属性动画
//初始化下落动画
private void initFreeFallAnimation() {
// 下落动画集合
mFreeFallAnimatiorSet = new AnimatorSet();
// 几何图形的垂直位移动画
ObjectAnimator freeFallTranslationAnimator = ObjectAnimator.ofFloat(
mShapeLodingView, "translationY", 0, mTranslationYDistance);
// 定义动画的变化率。
freeFallTranslationAnimator.setInterpolator(new AccelerateInterpolator(factor));
// 中间阴影缩小动画
ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationView, "scaleX", 1, 0.2f);
mFreeFallAnimatiorSet.setDuration(ANIMATION_DURATION);
mFreeFallAnimatiorSet.playTogether(freeFallTranslationAnimator, scaleIndication);
mFreeFallAnimatiorSet.addListener(new AnimatorListenerAdapter() {
//设置动画监听器，监听该动画的开始、停止、取消、结束等状态，我们往往会用AnimtorListener适配器类来只实现我们需要的方法
@Override
public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation);
// 下落动画结束，改变形状，然后执行上抛动画
upThrow();
mShapeLodingView.changeShape();
}
});
}上抛动画其实和下落动画差不多，只要在下落动画执行完之后启动上抛动画即可，但是我们需要在下落动画结束完后改变形状，最直接的方式便是改变几何图像 ImageView 的背景资源即可，但是个人认为这样不是太好，所以需要自定义几何形状 ShapeLoadingView，然后提供一个 changeShape() 的方法，里面调用 invalidate()，在 onDraw(Canvas canvas) 中画对应的几何形状。
最后就剩两个旋转的动画了，我们旋转的动画以及角度问题我们直接从自定义 ShapeLoadingView 中获取，提供一个 getUpThrowRoteAnimation() 方法。
/**
* 在ShapeLoadingView的构造方法中初始化旋转动画即可
*/
private void initRoteAnimation() {
mRectRoteAnimation =
ObjectAnimator.ofFloat(this, "rotation", 0, -120);
mDefaultRoteAnimation =
ObjectAnimator.ofFloat(this, "rotation", 0, 180);
}
/**
* 得到当前正在上抛时应该旋转的动画
*/
public ObjectAnimator getUpThrowRoteAnimation() {
switch (mCureentShape){
case SHAPE_RECT:
return mRectRoteAnimation;
default:
return mDefaultRoteAnimation;
}
}给上抛动画设置动画监听，在其 onAnimationStart() 中执行旋转动画
mUpThrowAnimatiorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//动画结束,下落
freeFall();
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
// 动画开始，和旋转动画一起执行
startShapeRoteAnimator();
}
/**
* 执行旋转动画
*/
private void startShapeRoteAnimator() {
ObjectAnimator roteAnimation
= mShapeLodingView.getUpThrowRoteAnimation();
roteAnimation.setDuration(ANIMATION_DURATION);
roteAnimation.setInterpolator(new DecelerateInterpolator(factor));
roteAnimation.start();
}
});作者：红橙Darren 链接：http://www.jianshu.com/p/e4de28b4d8ac
精彩推荐
技术 - 资讯 - 感悟
END