android开发之简单的属性动画

看到一个好的简单动画制作，回顾一下制作过程！

首先，一个好的布局是一个成功的开始。首先建立一个大致的布局：

<FrameLayout
        android:id="@+id/sky"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.61"
        android:background="@color/blue_sky">
        <ImageView
            android:id="@+id/sun"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:src="@drawable/sun"
            />
    </FrameLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.39"
        android:background="@color/sea"
        />

这里的太阳金色或者红色，天空是天蓝色，大海是深蓝（蔚蓝）色，接着创建SunsetFragment类，实例化fragment_sunset布局并返回结果视图：

public class SunsetFragment extends Fragment {

    public static SunsetFragment newInstance() {
        return new SunsetFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_sunset, container, false);

        return view;
    }
}

接着将fragment插入到activity，创建一个SunsetFragment类

public class SunsetActivity extends SingleFragmentActivity {

    @Override
    protected Fragment createFragment() {
        return SunsetFragment.newInstance();
    }
}

接着就需要让视图“动起来”，首先将视图组件和java代码相关联

private View mSceneView;
private View mSunView;
private View mSkyView;

...
mSceneView = view;
mSunView = view.findViewById(R.id.sun);
mSkyView = view.findViewById(R.id.sky);

创造startAnimation函数获取视图的顶部坐标的位置，以及创建ObjectAnimator对象执行动画：

    private void startAnimation() {
        float sunYStart = mSunView.getTop();
        float sunYEnd = mSkyView.getHeight();

        ObjectAnimator heightAnimator = ObjectAnimator
                .ofFloat(mSunView, "y", sunYStart, sunYEnd)
                .setDuration(3000);
            heightAnimator.start();
}

最后将这个函数放置在视图响应的监听器里即可：

mSceneView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startAnimation();
            }
        });

到此，一个简单的动画即可完成。

但是此时的动画并不完美，还可以添加上加速的特效：

heightAnimator.setInterpolator(new AccelerateInterpolator());

以及色彩的渐变（即随着圆形视图的落下，背景也随之改变），于是添加一个ObjectAnimator对象，实现天空色彩从一种颜色到另一种颜色的转变

ObjectAnimator sunsetSkyAnimator = ObjectAnimator
                .ofInt(mSkyView, "backgroundColor", mBlueSkyColor, mSunsetSkyColor)
                .setDuration(3000);

这里同样用start（）方法开始，并且可以加上TypeEvaluator子类精确的计算从开始到结束的递增值。这里创建了两个动画，接着还可以创建一个动画(模仿落日后的夜空），然后使用AnimatorSet去同时播放动画：

            ObjectAnimator nightSkyAnimator = ObjectAnimator
                .ofInt(mSkyView, "backgroundColor", mSunsetSkyColor, mNightSkyColor)
                .setDuration(1500);
            nightSkyAnimator.setEvaluator(new ArgbEvaluator());

            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet
                .play(heightAnimator)
                .with(sunsetSkyAnimator)
                .before(nightSkyAnimator);
            animatorSet.start();

到此完成，看看效果吧！