基于Android的飞鸟动画APP设计与实现.zip

# Android动画实验 > 学习Android的逐帧动画、补间动画、属性动画、Shape、菜单、触摸事件等 。 # 一、实验说明 先通过看视频birdFly.mp4了解本次实验要完成的任务。下面的实验内容把本次实验分成了18个功能来完成，可以只完成其中一部分功能，并在最后指明完成了哪些功能。 # 二、实验内容 ## 2.1 核心设计 利用逐帧动画（FrameAnimation）实现小鸟动画（ImageView）。 1. 编程说明：RelativeLayout可以加上白云背景。 参考资料：动画.pdf 参考源码：FrameAnim 使用资源：sprite1.png~sprite8.png 2. 利用TouchDown事件和TranslateAnimation实现在屏幕上引导小鸟飞行。 参考资料：安卓程序设计（二）p26 或p41（TouchDown可以用于Activity） p14 参考源码：TweenAnimCases 3. 利用ImageView.setRotateY()控制鸟飞行的方向。 4. 控制鸟飞行的范围不要超出显示范围。 参考资料：动画.pdf可以加一个宽高match_parent的ImageView(后面13可以用到)，得到它的宽度和高度，或者用屏幕尺寸（好像不准确）。 5. 通过取得屏幕大小控制鸟飞行的速度。 如果整个屏幕对角飞行时间为5秒，按飞行距离设置每段飞行的时间，距离越短，时间越短。 6. 采用属性动画（500ms）使得鸟飞行方向平滑变化（取代第3条）。注意：飞行动画的启动要延迟500ms以配合本动画。 参考源码：PropAnimCase ## 2.2 菜单设计 - 增加选项菜单：开始录像、结束录像、录像重放、结束回放 参考源码：Menu 参考资料：对话框和菜单.pdf ## 2.3 录像小圆点设计 1. 增加一个表示正在录制的小红点（shape）。设计一个0.5秒显示红点0.5秒显示灰色或透明点的逐帧动画。 参考资料：动画.pdf 参考源码：FrameAnim 2. 只有在录像时才显示小红点，结束录像时不显示小红点。 参考资料：列表与布局，帧布局(p43)setVisibility ## 2.4 录制设计 - 用一个类Pos和一个ArrayList<Pos>记录所走路径的方向和停留地点。 - 每次开始录像时清除原来的记录。 ## 2.5 重播设计 1. 通过菜单“录像重放”重新显示飞行过程。 编程说明： （1）开始重放时要清除Path对象。 （2）最好把前面的飞行动画用类方法独立出来。 （3）动画通过onAnimationEnd()事件接续。 参考资料：安卓程序设计（二） p24 参考源码：PropAnimCase 2. 在每条线路飞行前显示飞行路线。 编程说明： （1）增加一个自定义View作为背景（可以用第4步中增加的ImageView），并在其中定义一个Path对象 （2）每次开始一段线路时增加Path对象的点(lineTo)，并调用其方法invalidate()，使其重画Path对象。 （3）可以采用setStrokeJoin和setStrokeCap令路线圆滑。 （4）可以采用BlurMaskFilter令路线圆滑。 参考资料：安卓程序设计（二） p56 p29 p62 p104 参考源码：CanvasDrawTest PathView.java 3. 菜单“结束重放”可以中途停止重放，并清除路径的显示。 4. 重放完毕后回到播放前的状态。 ## 2.6 其他控制功能 1. 播放录像时令触摸操作无效。 2. 在飞行进行过程中令触摸操作无效。 3. 录像时不能重放录像。 参考截屏：  按照完成的情况自己选择一些运行界面进行截屏：  完成后的主要源码(.java和.xml)： ### MainActivity.java: ```java public class MainActivity extends AppCompatActivity implements View.OnTouchListener { private ImageView imageView, emptyImage, shapeView; private AnimationDrawable sprite, drawable; private boolean toRight = true, record = false, play = false, respond = true; private ArrayList<Pos> pathList = new ArrayList<>(); private Pos lastPos; private PathView pathView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ConstraintLayout constraintLayout = (ConstraintLayout) findViewById(R.id.container); constraintLayout.setOnTouchListener(this); imageView = (ImageView) findViewById(R.id.sprite); emptyImage = (ImageView) findViewById(R.id.empty_image); shapeView = (ImageView) findViewById(R.id.shape); pathView = (PathView) findViewById(R.id.path); sprite = (AnimationDrawable) imageView.getBackground(); drawable = (AnimationDrawable) shapeView.getBackground(); sprite.start(); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_menu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.start_record: record = true; shapeView.setVisibility(View.VISIBLE); drawable.start(); pathList.clear(); pathList.add(new Pos(imageView.getX(), imageView.getY(), toRight)); break; case R.id.stop_record: record = false; drawable.stop(); shapeView.setVisibility(View.GONE); break; case R.id.start_play: if (record) break; pathView.clearPath(); play = true; lastPos = new Pos(imageView.getX(), imageView.getY(), toRight); if (pathList.size() != 0) { Pos firstPos = pathList.get(0); imageView.setX(firstPos.getX()); imageView.setY(firstPos.getY()); if (toRight != firstPos.isToRight()) if (firstPos.isToRight()) imageView.setRotationY(0); else imageView.setRotationY(180); toRight = firstPos.isToRight(); playRecord(firstPos, 1); } break; case R.id.stop_play: pathView.clearPath(); imageView.clearAnimation(); imageView.setX(lastPos.getX()); imageView.setY(lastPos.getY()); if (toRight != lastPos.isToRight()) if (lastPos.isToRight()) imageView.setRotationY(0); else imageView.setRotationY(180); toRight = lastPos.isToRight(); play = false; break; } return super.onOptionsItemSelected(item); } @Override public boolean onTouch(View view, final MotionEvent event) { if (play || !respond) return true; switch (event.getActionMasked()) { case MotionEvent.ACTION_DOWN: respond = false; float deX = event.getX() + imageView.getWidth()/2 > emptyImage.getWidth() ? emptyImage.getWidth() - imageView.getWidth()/2 : event.getX(); float deY = event.getY() + imageView.getHeight()/2 > emptyImage.getHeight() ? emptyImage.getHeight() - imageView.getHeight()/2 : event.getY(); final float X = deX < imageView.getWidth()/2 ? imageView.getWidth()/2 : deX; final float Y = deY < imageView.getHeight()/2 ? imageView.getHeight()/2 : deY; final float toX = X - imageView.getX() - imageView.getWidth()/2; final float toY = Y - imageView.getY() - imageView.getHeight()/2; if (toX < 0 && toRight) { t