脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android自定义View飘动叶子

Android自定义View实现飘动的叶子效果（三）

 更新时间：2017年03月23日 10:25:23   作者：罔少年  
这篇文章主要为大家详细介绍了Android自定义View实现飘动的叶子效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

上一篇对自定义View及一些方法有所了解，下面做一个简单的叶子飘动的例子

主要技术点

1、添加背景图片canvas.drawBitmap()

2、Matrix动画类

3、Matrix添加到画布上

步骤

1、添加背景颜色

public LeafView(Context context, AttributeSet attrs) {
  super(context, attrs);
  bgPaint = new Paint();
  bgPaint.setColor(mResources.getColor(R.color.bg_color));
 }


 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  width = w;
  height = h;
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  bgRect = new RectF(0, 0 , width, height);
  canvas.drawRect(bgRect, bgPaint);
}

2、添加背景图片

 public LeafView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mResources = getResources();
  bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();
  bgPaint = new Paint();
  bgPaint.setColor(mResources.getColor(R.color.bg_color));
 }


 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  width = w;
  height = h;
  bgDestRect = new Rect(0, 0 , width, height);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  bgRect = new RectF(0, 0 , width, height);
  canvas.drawRect(bgRect, bgPaint);
  canvas.drawBitmap(bgBitmap, null, bgDestRect, null);
}

canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) 添加图片到画布

Rect src：图片剪裁,null图片显示全屏，  RectF dst：图片在Canvas画布区域

3、添加叶子

public LeafView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mResources = getResources();
  bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();
  leafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null))).getBitmap();
  bgPaint = new Paint();
  bgPaint.setColor(mResources.getColor(R.color.bg_color));
 }


 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  width = w;
  height = h;
  bgDestRect = new Rect(0, 0 , width, height);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  bgRect = new RectF(0, 0 , width, height);
  //添加背景
  canvas.drawRect(bgRect, bgPaint);
  //添加背景图片
  canvas.drawBitmap(bgBitmap, null, bgDestRect, null);
  //添加叶子
  canvas.drawBitmap(leafBitmap, new Matrix(), new Paint());
}

canvas.drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)添加一个带动画的bitmap到画布

这里matrix什么都没定义，所以默认如下显示，左上角叶子

4、给叶子添加Matrix动画

Matrix作用：

a、translate 平移

b、rotate 旋转

c、scale 缩放

d、skew 倾斜

这里要用到matrix.postTranslate(float x, float y)，以画布左上角为(0,0); xy为平移绝对值

public LeafView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mResources = getResources();
  bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();
  leafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null))).getBitmap();
  mLeafHeight = leafBitmap.getWidht();  

  bgPaint = new Paint();
  bgPaint.setColor(mResources.getColor(R.color.bg_color));
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  width = w;
  height = h;
  bgDestRect = new Rect(0, 0 , width, height);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  bgRect = new RectF(0, 0 , width, height);
  //添加背景
  canvas.drawRect(bgRect, bgPaint);
  //添加背景图片
  canvas.drawBitmap(bgBitmap, null, bgDestRect, null);
  //添加叶子
  Matrix matrix = new Matrix();
  matrix.postTranslate(getMatriX(), (height-mLeadHeight)/2);
  canvas.drawBitmap(leafBitmap, new Matrix(), new Paint());
  //重复调用onDraw()
  postInvalidate();
 }
 long cycleTime = 5000; //叶子滑动一周的时间5秒
 long startTime = 0;  //叶子滑动开始时间
 private float getMatriX() {
  float betweenTime = startTime - System.currentTimeMillis();
  //周期结束再加一个cycleTime
  if(betweenTime < 0) {
   startTime = System.currentTimeMillis() + cycleTime;
   betweenTime = cycleTime;
  }
  //通过时间差计算出叶子的坐标
  float fraction = (float) betweenTime / cycleTime;
  float x = (int)(width * fraction);
  return x;
 }

好了，看到的效果就是如下，由于Matrix没有设置动画时间长度概念，所以通过时间差来计算出位移值的方式，来设置滑动快慢

完整代码不贴了，就把上面这段代码复制到一个LeafView extends View中，然后在里面定义几个全局变量就好了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

  • Android中Bitmap用法实例分析

    Android中Bitmap用法实例分析

    这篇文章主要介绍了Android中Bitmap用法,结合实例形式分析了Android操作图片的载入、属性设置、旋转等相关技巧,需要的朋友可以参考下
    2016-02-02
  • Android使用线程获取网络图片的方法

    Android使用线程获取网络图片的方法

    这篇文章主要为大家详细介绍了Android使用线程获取网络图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Android Support Palette使用详解

    Android Support Palette使用详解

    这篇文章主要介绍了Android Support Palette使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • android上的一个网络接口和图片缓存框架enif简析

    android上的一个网络接口和图片缓存框架enif简析

    android上的一个网络接口和图片缓存框架enif详细介绍:底层网络接口采用apache的httpclient连接池框架、图片缓存采用基于LRU的算法等等,需要了解的朋友可以详细参考下
    2012-12-12
  • Android 混合动画详解及实现代码

    Android 混合动画详解及实现代码

    这篇文章主要介绍了Android 混合动画详解及实现代码的相关资料,简单的一种动画（如旋转、缩放、渐变、位移等）有时候并不能满足我们项目的要求，这时候就需要运用到混合动画，需要的朋友可以参考下
    2016-11-11
  • Android AlertDialog对话框用法示例

    Android AlertDialog对话框用法示例

    这篇文章主要介绍了Android AlertDialog对话框用法,结合实例形式分析了AlertDialog对话框的功能及常见使用技巧,需要的朋友可以参考下
    2016-06-06
  • Android UI设计与开发之仿人人网V5.9.2最新版引导界面

    Android UI设计与开发之仿人人网V5.9.2最新版引导界面

    这篇文章主要为大家详细介绍了Android UI设计与开发之仿人人网V5.9.2最新版引导界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android手势操作示例(上/下/左/右的判断)

    Android手势操作示例(上/下/左/右的判断)

    这篇文章主要介绍了Android手势操作方法,包含了针对上、下、左、右等方向的判断,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Android 编程下的计时器代码

    Android 编程下的计时器代码

    在安卓 APP 的手机号注册逻辑中，经常会有将激活码发送到手机的环节，这个环节中绝大多数的应用考虑到网络延迟或服务器压力以及短信服务商的延迟等原因，会给用户提供一个重新获取激活码的按钮
    2013-08-08
  • Android布局技巧之include、merge与ViewStub标签的巧用

    Android布局技巧之include、merge与ViewStub标签的巧用

    Android 官方提供了三个用来优化布局的标签，分别是include、merge与ViewStub，下面这篇文章主要给大家介绍了关于Android布局技巧之include、merge与ViewStub标签巧用的相关资料，需要的朋友可以参考下
    2018-06-06

最新评论