android 海平面动画,《Android编程权威指南》之属性动画篇

淡淡的烟草味﹌ 2022-10-16 05:49 231阅读 0赞

每次做项目写一些小Demo的时候，为了让程序跑的更加有趣，都会在设计的时候加上一些动画效果，提高用户体验，很有意思来着。

Android基础动画分为：1. Tween Animation 变换动画 2. Frame Animation 帧动画 3. Layout Animation 布局动画 4. Property Animation 属性动画(相对复杂) 现在需要了解就是属性动画了，Demo来自于《Android编程权威指南》。

Sunset项目这个demo是模拟一个落日景象。

![b0ddebfa1ee0?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\_source=recommendation][b0ddebfa1ee0_utm_campaign_maleskine_utm_content_note_utm_medium_seo_notes_utm_source_recommendation]

Demo截图

res/values/colors.xml

Demo截图

res/drawable/sun.xml(在矩形视图上显示一个圆，模拟太阳)

Demo截图

res/layout/fragment\_sunset.xml(日落场景布局)

Demo截图SingleFragmentActivity.java

public abstract class SingleFragmentActivity extends AppCompatActivity \{

protected abstract Fragment createFragment();

@LayoutRes

protected int getLayoutRedId()\{

return R.layout.activity\_fragment;

@Override

protected void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

setContentView(getLayoutRedId());

FragmentManager fm = getSupportFragmentManager();

Fragment fragment = fm.findFragmentById(R.id.fragment\_container);

if (fragment == null)\{

fragment = createFragment();

fm.beginTransaction().add(R.id.fragment\_container, fragment).commit();

activity\_fragment.xml

Demo截图SunsetActivity.java

public class SunsetActivity extends SingleFragmentActivity \{

@Override

protected Fragment createFragment() \{

return SunsetFragment.newInstance();

SunsetFragment.java

public class SunsetFragment extends Fragment \{

private View mSceneView;

private View mSunView;

private View mSkyView;

private int mBlueSkyColor;

private int mSunsetSkyColor;

private int mNightSkyColor;

public static SunsetFragment newInstance() \{

return new SunsetFragment();

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) \{

View view = inflater.inflate(R.layout.fragment\_sunset, container, false);

mSceneView = view;

mSunView = view.findViewById(R.id.sun);

mSkyView = view.findViewById(R.id.sky);

Resources resources = getResources();

mBlueSkyColor = resources.getColor(R.color.blue\_sky);

mSunsetSkyColor = resources.getColor(R.color.sunset\_sky);

mNightSkyColor = resources.getColor(R.color.night\_sky);

mSceneView.setOnClickListener(new View.OnClickListener() \{

@Override

public void onClick(View v) \{

startAnimation();

\});

return view;

private void startAnimation() \{

float sunYStart = mSunView.getTop(); // 相对父视图的顶部位置

float sunYEnd = mSkyView.getHeight(); // 此视图的高度

ObjectAnimator heightAnimatior = ObjectAnimator.ofFloat(mSunView, "y", sunYStart, sunYEnd).setDuration(3000);

heightAnimatior.setInterpolator(new AccelerateInterpolator());

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

sunsetSkyAnimator.setEvaluator(new ArgbEvaluator());

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

nightSkyAnimator.setEvaluator(new ArgbEvaluator());

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.play(heightAnimatior).with(sunsetSkyAnimator).before(nightSkyAnimator);

animatorSet.start();

// heightAnimatior.start();

// sunsetSkyAnimator.start();

属性动画相关的类介绍：

ObjectAnimator： 动画的执行类

ValueAnimator： 动画的执行类

AnimatorSet：可以放一起执行的动画集，设置执行的先后顺序，时间等

AnimatorInflater： 加载属性动画的xml文件

TypeEvaluator： 类型估值，主要用于设置动画操作属性的值，能帮助ObjectAnimator对象精确地计算开始到结束间的递增值

TimeInterpolator： 时间插值，用于控制动画执行过程

PropertyValuesHolder： 属性存储器，为两个执行类提供更新多个属性的功能

Keyframe：为 PropertyValuesHolder提供多个关键帧的操作值

AnimatorUpdateListener：动画更新监听

AnimatorListener：动画执行监听，在动画开始、重复、结束、取消时进行回调

总的来说，属性动画就是，动画的执行类来设置动画操作的对象的属性、持续时间，开始和结束的属性值，时间差值等，然后系统会根据设置的参数动态的变化对象的属性。

深入学习：其他动画 API

挑战练习

让日落可逆(点击屏幕，等太阳落下后，再次点击屏幕，让太阳升起来)这里我的实现方式将一些动画都定义为了类的成员变量，定义了两个boolean类型，一个用户判断是落日还是升日，一个用于判断用户是否第一次点击，这里由于要记录最开始太阳的位置，因为在onCreateView方法中得到太阳位置都是0，视图还没创建好，还有个判断是判别落日或者升日的动画是否正在执行，若是正在执行则点击屏幕无效

public class SunsetFragment extends Fragment \{

private View mSceneView;

private View mSunView;

private View mSkyView;

private int mBlueSkyColor;

private int mSunsetSkyColor;

private boolean isSunDown = true; // 是否落日

private ObjectAnimator sunsetSkyAnimator;

private ObjectAnimator nightSkyAnimator;

private float sunYFirstStart;

private float sunYFirstEnd;

private boolean isFirstClick = true; // 是否第一次点击

private ObjectAnimator downAnimatior;

private AnimatorSet downAnimatorSet;

private ObjectAnimator upAnimatior;

private AnimatorSet upAnimatorSet;

public static SunsetFragment newInstance() \{

return new SunsetFragment();

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) \{

View view = inflater.inflate(R.layout.fragment\_sunset, container, false);

mSceneView = view;

mSunView = view.findViewById(R.id.sun);

mSkyView = view.findViewById(R.id.sky);

mBlueSkyColor = ContextCompat.getColor(getActivity(), R.color.blue\_sky);

mSunsetSkyColor = ContextCompat.getColor(getActivity(), R.color.sunset\_sky);

initSkyAnimation();

mSceneView.setOnClickListener(new View.OnClickListener() \{

@Override

public void onClick(View v) \{

if (isFirstClick) \{

sunYFirstStart = mSunView.getTop();

sunYFirstEnd = mSkyView.getHeight();

initUpDownAnimation();

isFirstClick = false;

if(!downAnimatorSet.isRunning() && !upAnimatorSet.isRunning())\{

if (isSunDown) \{

downAnimatorSet.start();

\} else \{

upAnimatorSet.start();

isSunDown = !isSunDown;

\});

return view;

// 初始化落日，升日动画

private void initUpDownAnimation() \{

downAnimatior = ObjectAnimator.ofFloat(mSunView, "y", sunYFirstStart, sunYFirstEnd).setDuration(3000);

downAnimatior.setInterpolator(new AccelerateInterpolator());

downAnimatorSet = new AnimatorSet();

downAnimatorSet.play(downAnimatior).with(sunsetSkyAnimator);

upAnimatior = ObjectAnimator.ofFloat(mSunView, "y", sunYFirstEnd, sunYFirstStart).setDuration(3000);

upAnimatior.setInterpolator(new AccelerateInterpolator());

upAnimatorSet = new AnimatorSet();

upAnimatorSet.play(upAnimatior).with(nightSkyAnimator);

// 初始化天空颜色两种动画

private void initSkyAnimation() \{

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

sunsetSkyAnimator.setEvaluator(new ArgbEvaluator());

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

nightSkyAnimator.setEvaluator(new ArgbEvaluator());

添加太阳动画特效(让它有规律地放大或是加一圈旋转的光线，海平面加上太阳倒影)

在日落过程中实现动画反转(在太阳慢慢下落时点击屏幕，让太阳无缝回升至原来所在位置，或者，在太阳落下进入夜晚时点击屏幕，让太阳重新升回天空)

[b0ddebfa1ee0_utm_campaign_maleskine_utm_content_note_utm_medium_seo_notes_utm_source_recommendation]: /images/20221014/b8947032263b422f9ae3643777a7aaee.png