Use SurfaceView to achieve rain and snow animation effects-H5 Tutorial-php.cn

This article mainly introduces you to the relevant information about using SurfaceView to achieve rain and snow animation effects. It requires some basic View knowledge and some basic Kotlin syntax. Detailed sample code is given in the article for your reference. Study, friends who need it, study together.

Preface

I recently planned to do a wave of things to consolidate what I have learned recently. Without further ado, let’s take a look at the final rendering:

raining.gif

It’s a bit lazy here... the second picture is still the same Rainfall...but this is not the key point...

Snowing.gif

The recorded mp4 was converted into gif. The first gif has a frame rate set, so it seems that the frame drop may be serious, but in fact it is not, because here I also paid attention to the problem of drawing 60 frames in 1 second. Reading this article requires some basic View knowledge and some basic Kotlin syntax. To be honest, in terms of knowledge, it has little to do with Kotlin, as long as you understand the basic syntax.

Clear your ideas

Before taking action, you need to sort out your ideas and analyze what solution should be adopted from the following aspects. This effect:

Working thread: The first thing to think about is: this raining effect needs to be achieved through continuous drawing. If you do this operation on the main thread, it is very likely that it will Block the main thread, causing ANR or abnormal lag. So you need a View that can be drawn in a sub-thread. There is no doubt that SurfaceView can meet this demand.
How to implement: Analyze the implementation of a raindrop. First of all, simple effects can actually be replaced by drawing lines. Not everyone has the Sharingan. Dynamic vision is so good. Once it moves, who knows whether it is a line or a raindrop... Of course, there are many APIs for Canvas drawing, and it does not necessarily have to be done in this way. accomplish. So when designing the class, we just set the draw method so that it can be overridden by subclasses. Are you not satisfied with my implementation? No problem, I give you the freedom to change it~
Realization of whereabouts: There are two ways to make raindrops move, one is to draw purely according to coordinates, and the other is to use Property animation, rewrite the estimator yourself, and dynamically change the y value. In the end, I adopted the former solution. Why did I give up the latter property animation solution? The reason is: the drawing method here relies on external continuous triggering of drawing events to achieve dynamic drawing. Obviously, the first method is more in line with the situation here.

The above are some of my initial thoughts on implementation. Next is the code implementation analysis.

Code implementation analysis

First put the code structure diagram:

Code structure

WeatherShape is the parent class of all weather. Rain and Snow are two specific implementation classes.

Look at the code of the parent class:

package com.xiasuhuei321.gank_kotlin.customview.weather

import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.PointF
import com.xiasuhuei321.gank_kotlin.context
import com.xiasuhuei321.gank_kotlin.extension.getScreenWidth
import java.util.*

/**
 * Created by xiasuhuei321 on 2017/9/5.
 * author:luo
 * e-mail:xiasuhuei321@163.com
 *
 * desc: All shape&#39;s parent class.It describes a shape will have
 * what feature.It&#39;s draw flows are:
 * 1.Outside the class init some value such as the start and the
 * end point.
 * 2.Invoke draw(Canvas) method, in this method, there are still
 * two flows:
 * 1) Get random value to init paint, this will affect the shape
 * draw style.
 * 2) When the shape is not used, invoke init method, and when it
 * is not used invoke drawWhenInUse(Canvas) method. It should be
 * override by user and to implement draw itself.
 *
 */
abstract class WeatherShape(val start: PointF, val end: PointF) {
 open var TAG = "WeatherShape"

 /**
  * 是否是正在被使用的状态
  */
 var isInUse = false

 /**
  * 是否是随机刷新的Shape
  */
 var isRandom = false

 /**
  * 下落的速度，特指垂直方向，子类可以实现自己水平方向的速度
  */
 var speed = 0.05f

 /**
  * shape的宽度
  */
 var width = 5f

 var shapeAlpha = 100

 var paint = Paint().apply {
  strokeWidth = width
  isAntiAlias = true
  alpha = alpha
 }

 // 总共下落的时间
 var lastTime = 0L
 // 原始x坐标位置
 var originX = 0f

 /**
  * 根据自己的规则计算加速度，如果是匀速直接 return 0
  */
 abstract fun getAcceleration(): Float

 /**
  * 绘制自身，这里在Shape是非使用的时候进行一些初始化操作
  */
 open fun draw(canvas: Canvas) {
  if (!isInUse) {
   lastTime += randomPre()
   initStyle()
   isInUse = true
  } else {
   drawWhenInUse(canvas)
  }
 }

 /**
  * Shape在使用的时候调用此方法
  */
 abstract fun drawWhenInUse(canvas: Canvas)

 /**
  * 初始化Shape风格
  */
 open fun initStyle() {
  val random = Random()
  // 获取随机透明度
  shapeAlpha = random.nextInt(155) + 50
  // 获得起点x偏移
  val translateX = random.nextInt(10).toFloat() + 5
  if (!isRandom) {
   start.x = translateX + originX
   end.x = translateX + originX
  } else {
   // 如果是随机Shape，将x坐标随机范围扩大到整个屏幕的宽度
   val randomWidth = random.nextInt(context.getScreenWidth())
   start.x = randomWidth.toFloat()
   end.x = randomWidth.toFloat()
  }
  speed = randomSpeed(random)
  // 初始化length的工作留给之后对应的子类去实现
  // 初始化color也留给子类去实现
  paint.apply {
   alpha = shapeAlpha
   strokeWidth = width
   isAntiAlias = true
  }
  // 如果有什么想要做的，刚好可以在追加上完成，就使用这个函数
  wtc(random)
 }

 /**
  * Empty body, this will be invoke in initStyle
  * method.If current initStyle method can satisfy your need
  * but you still add something, by override this method
  * will be a good idea to solve the problem.
  */
 open fun wtc(random:Random): Unit {

 }

 abstract fun randomSpeed(random: Random): Float

 /**
  * 获取一个随机的提前量，让shape在竖屏上有一个初始的偏移
  */
 open fun randomPre(): Long {
  val random = Random()
  val pre = random.nextInt(1000).toLong()
  return pre
 }
}

Copy after login

Speaking of this code, well, it has gone through some reconstruction. ...I refactored it on the way to play with my classmates on Saturday, and extracted some operations that can be put into the base class into the base class. Although this is not flexible enough, subclasses can easily implement something that requires similar functions through inheritance, such as rain and snow here. By the way, I want to complain... My annotation style is not very good, a mix of Chinese and English... If you look carefully, you can see that the shape of the raindrops or snowflakes in the gif may be slightly different. Yes, every drop of rain and snowflake , have undergone some random transformations.

The two more important attributes are isInUse and isRandom. I originally wanted to use a container as the management class of Shape for unified management, but this will definitely make the use and reuse process more complicated. In the end, I decided to use a simpler method. Shape internally saves a usage status and whether it is random. isRandoma indicates whether this Shape is random. Randomness will be reflected in the x coordinate of the Shape in the current code. If the random flag is true, then the x coordinate will be any value from 0 ~ ScreenWidth. So it's not random? In my implementation, the same type of Shape will be divided into two types, one type of constant group. It will have a relatively fixed x value, but there will also be a random offset of 10~15px. The other type is a random group. The x value is randomized across the entire screen, so that there are raindrops (snowflakes) everywhere on the screen but there will be differences in density. initStyle is this random process. If you are interested, you can take a look at the implementation~

start and end are the upper left corner point and the lower right corner point of the Shape. If you know the API of Cavans, you should know that through the start and end conversion and calculation, most shapes can be drawn.

接下来看一下具体实现的Snow类：

package com.xiasuhuei321.gank_kotlin.customview.weather

import android.graphics.*
import com.xiasuhuei321.gank_kotlin.context
import com.xiasuhuei321.gank_kotlin.extension.getScreenHeight
import java.util.*

/**
 * Created by xiasuhuei321 on 2017/9/5.
 * author:luo
 * e-mail:xiasuhuei321@163.com
 */
class Snow(start: PointF, end: PointF) : WeatherShape(start, end) {

 /**
  * 圆心，用户可以改变这个值
  */
 var center = calcCenter()

 /**
  * 半径
  */
 var radius = 10f

 override fun getAcceleration(): Float {
  return 0f
 }

 override fun drawWhenInUse(canvas: Canvas) {
  // 通过圆心与半径确定圆的位置及大小
  val distance = speed * lastTime
  center.y += distance
  start.y += distance
  end.y += distance
  lastTime += 16
  canvas.drawCircle(center.x, center.y, radius, paint)
  if (end.y > context.getScreenHeight()) clear()
 }

 fun calcCenter(): PointF {
  val center = PointF(0f, 0f)
  center.x = (start.x + end.x) / 2f
  center.y = (start.y + end.y) / 2f
  return center
 }

 override fun randomSpeed(random: Random): Float {
  // 获取随机速度0.005 ~ 0.01
  return (random.nextInt(5) + 5) / 1000f
 }

 override fun wtc(random: Random) {
  // 设置颜色渐变
  val shader = RadialGradient(center.x, center.y, radius,
    Color.parseColor("#FFFFFF"), Color.parseColor("#D1D1D1"),
    Shader.TileMode.CLAMP)
  // 外部设置的起始点其实并不对，先计算出半径
  radius = random.nextInt(10) + 15f
  // 根据半径计算start end
  end.x = start.x + radius
  end.y = start.y + radius
  // 计算圆心
  calcCenter()

  paint.apply {
   setShader(shader)
  }
 }

 fun clear() {
  isInUse = false
  lastTime = 0
  start.y = -radius * 2
  end.y = 0f

  center = calcCenter()
 }
}

Copy after login

这个类只要理解了圆心的计算和绘制，基本也就没什么东西了。首先排除干扰项，getAcceleration这玩意在设计之初是用来通过加速度计算路程的，后来发现……算了，还是匀速吧……于是都return 0f了。这里wtc()函数和drawWhenInUse可能会看的你一脸懵逼，什么函数名，drawWhenInUse倒是见名知意，这wtc()是什么玩意？这里wtc是相当于一种追加初始化，完全状态的函数名应该是wantToChange() 。这些个函数调用流程是这样的：

流程图

其中draw(canvas)是父类的方法，对供外部调用的方法，在isInUse标识位为false时对Shape进行初始化操作，具体的就是调用initStyle()方法，而wtc()则会在initStyle()方法的最后调用。如果你有什么想要追加的初始化，可以通过这个函数实现。而drawWhenInUse(canvas)方法则是需要实现动态绘制的函数了。我这里就是在wtc()函数中进行了一些初始化操作，并且根据圆的特性重新计算了start、end和圆心。

接下来，就看看我们到底是怎么把这些充满个性（口胡）的雪绘制到屏幕上：

package com.xiasuhuei321.gank_kotlin.customview.weather

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.PixelFormat
import android.graphics.PorterDuff
import android.util.AttributeSet
import android.view.SurfaceHolder
import android.view.SurfaceView
import com.xiasuhuei321.gank_kotlin.extension.LogUtil
import java.lang.Exception

/**
 * Created by xiasuhuei321 on 2017/9/5.
 * author:luo
 * e-mail:xiasuhuei321@163.com
 */
class WeatherView(context: Context, attributeSet: AttributeSet?, defaultStyle: Int) :
  SurfaceView(context, attributeSet, defaultStyle), SurfaceHolder.Callback {
 private val TAG = "WeatherView"

 constructor(context: Context, attributeSet: AttributeSet?) : this(context, attributeSet, 0)

 constructor(context: Context) : this(context, null, 0)

 // 低级并发，Kotlin中支持的不是很好，所以用一下黑科技
 val lock = Object()
 var type = Weather.RAIN
 var weatherShapePool = WeatherShapePool()

 @Volatile var canRun = false
 @Volatile var threadQuit = false

 var thread = Thread {
  while (!threadQuit) {
   if (!canRun) {
    synchronized(lock) {
     try {
      LogUtil.i(TAG, "条件尚不充足，阻塞中...")
      lock.wait()
     } catch (e: Exception) {
     }
    }
   }
   val startTime = System.currentTimeMillis()
   try {
    // 正式开始表演
    val canvas = holder.lockCanvas()
    if (canvas != null) {
     canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
     draw(canvas, type, startTime)
    }
    holder.unlockCanvasAndPost(canvas)
    val drawTime = System.currentTimeMillis() - startTime
    // 平均16ms一帧才能有顺畅的感觉
    if (drawTime < 16) {
     Thread.sleep(16 - drawTime)
    }
   } catch (e: Exception) {
//    e.printStackTrace()
   }
  }
 }.apply { name = "WeatherThread" }

 override fun surfaceChanged(holder: SurfaceHolder?, format: Int, width: Int, height: Int) {
  // surface发生了变化
//  canRun = true

 }

 override fun surfaceDestroyed(holder: SurfaceHolder?) {
  // 在这里释放资源
  canRun = false
  LogUtil.i(TAG, "surfaceDestroyed")
 }

 override fun surfaceCreated(holder: SurfaceHolder?) {
  threadQuit = false
  canRun = true
  try {
   // 如果没有执行wait的话，这里notify会抛异常
   synchronized(lock) {
    lock.notify()
   }
  } catch (e: Exception) {
   e.printStackTrace()
  }
 }

 init {
  LogUtil.i(TAG, "init开始")
  holder.addCallback(this)
  holder.setFormat(PixelFormat.RGBA_8888)
//  initData()
  setZOrderOnTop(true)
//  setZOrderMediaOverlay(true)
  thread.start()
 }

 private fun draw(canvas: Canvas, type: Weather, startTime: Long) {
  // type什么的先放一边，先实现一个
  weatherShapePool.drawSnow(canvas)
 }

 enum class Weather {
  RAIN,
  SNOW
 }

 fun onDestroy() {
  threadQuit = true
  canRun = true
  try {
   synchronized(lock) {
    lock.notify()
   }
  } catch (e: Exception) {
  }
 }
}

Copy after login

init{}是kotlin中提供给我们用于初始化的代码块，在init进行了一些初始化操作并让线程start了。看一下线程中执行的代码，首先会判断一个叫做canRun的标识，这个标识会在surface被创建的时候置为true，否则将会通过一个对象让这个线程等待。而在surface被创建后，则会调用notify方法让线程重新开始工作。之后是进行绘制的工作，绘制前后会有一个计时的动作，计算时间是否小于16ms，如果不足，则让thread sleep 补足插值。因为16ms一帧的绘制速度就足够了，不需要绘制太快浪费资源。

这里可以看到我创建了一个Java的Object对象，主要是因为Kotlin本身对于一些并发原语支持的并不好。Kotlin中任何对象都是继承与Any，Any并没有wait、notify等方法，所以这里用了黑科技……创建了Java对象……

代码中关键代码绘制调用了WeatherShapePool的drawRain(canvas)方法，最后在看一下这个类：

package com.xiasuhuei321.gank_kotlin.customview.weather

import android.graphics.Canvas
import android.graphics.PointF
import com.xiasuhuei321.gank_kotlin.context
import com.xiasuhuei321.gank_kotlin.extension.getScreenWidth

/**
 * Created by xiasuhuei321 on 2017/9/7.
 * author:luo
 * e-mail:xiasuhuei321@163.com
 */
class WeatherShapePool {
 val constantRain = ArrayList<Rain>()
 val randomRain = ArrayList<Rain>()

 val constantSnow = ArrayList<Snow>()
 val randomSnow = ArrayList<Snow>()

 init {
  // 初始化
  initData()
  initSnow()
 }

 private fun initData() {
  val space = context.getScreenWidth() / 20
  var currentSpace = 0f
  // 将其均匀的分布在屏幕x方向上
  for (i in 0..19) {
   val rain = Rain(PointF(currentSpace, 0f), PointF(currentSpace, 0f))
   rain.originLength = 20f
   rain.originX = currentSpace
   constantRain.add(rain)
   currentSpace += space
  }

  for (j in 0..9) {
   val rain = Rain(PointF(0f, 0f), PointF(0f, 0f))
   rain.isRandom = true
   rain.originLength = 20f
   randomRain.add(rain)
  }
 }

 fun drawRain(canvas: Canvas) {
  for (r in constantRain) {
   r.draw(canvas)
  }
  for (r in randomRain) {
   r.draw(canvas)
  }
 }

 private fun initSnow(){
  val space = context.getScreenWidth() / 20
  var currentSpace = 0f
  // 将其均匀的分布在屏幕x方向上
  for (i in 0..19) {
   val snow = Snow(PointF(currentSpace, 0f), PointF(currentSpace, 0f))
   snow.originX = currentSpace
   snow.radius = 20f
   constantSnow.add(snow)
   currentSpace += space
  }

  for (j in 0..19) {
   val snow = Snow(PointF(0f, 0f), PointF(0f, 0f))
   snow.isRandom = true
   snow.radius = 20f
   randomSnow.add(snow)
  }
 }

 fun drawSnow(canvas: Canvas){
  for(r in constantSnow){
   r.draw(canvas)
  }

  for (r in randomSnow){
   r.draw(canvas)
  }
 }
}

Copy after login

这个类还是比较简单的，只是一个单纯的容器，至于叫Pool……因为刚开始自己想的是自己管理回收复用之类的，所以起了个名叫Pool，后来感觉这玩意好像不用实现的这么复杂……

总之，这玩意，会者不难，我的代码也非尽善尽美，如果我有任何纰漏或者你有什么好的意见，都可以提出，邮件或者是在文章下评论最佳。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！