图片分割爆炸效果

作者: 有点健忘 | 来源:发表于2019-01-09 17:08 被阅读8次

简介

简单实现下,模拟爆炸,这里就简单将图片分成N块,类似拼图,完事,给予x方向和y方向一个加速度移动
这里只是想到一种思路,就记录下而已。至于怎么炸,怎么画,加速度咋弄都是你的事了。


image.png

步骤

1.分割
我们给定每块的大小,比如10,完事x,y方向每隔10就裁剪一块图片出来,
实体类,用来保存每个拼图的位置

import android.graphics.Paint
import java.util.*

data class Ball(var x:Int,var y:Int,var accelarateX:Int,var accelarateY:Int=Random().nextInt(5)+10){
    val p=Paint(Paint.ANTI_ALIAS_FLAG)
    var width=0//拼图的宽
    var heigth=0//拼图的高
    var remove=false;
    //更新位置
    fun update(){
        x+=accelarateX
        y+=accelarateY
    }
    var xOLD=0
    var yOLD=0
    init {
        xOLD=x
        yOLD=y
    }
    //回复初始值,方便多次使用
    fun reset(){
        x=xOLD
        y=yOLD
    }
}
  1. 获取Bitmap
    简单对图片进行下处理,防止图片太大,内存溢出,根据具体情况做修改,非核心代码,拿到bitmap即可
    private fun initSomeThing(){
        if(isInEditMode){
            return
        }
       // 对图片进行处理,大于300的进行缩小,然后获取到我们需要的图片
        val res=R.drawable.imager
        val option=BitmapFactory.Options()
        option.inJustDecodeBounds=true
        BitmapFactory.decodeResource(resources, res,option)
        val w=option.outWidth
        val h=option.outHeight
        option.inSampleSize=1
        val wh=Math.max(w,h)
        if(wh>300){
            val size=Math.sqrt(h/300.00).roundToInt()
            option.inSampleSize=size
        }
        option.inJustDecodeBounds=false

         bitmap= BitmapFactory.decodeResource(resources, res,option)
        bpW=bitmap.width;
        bpH=bitmap.height;

        println("w/h========${bpW}/${bpH}=====${w}/$h")
    }

3.切割图片
x,y方向上循环增加split对图片进行切割,切割后的图片是bp,完事保存在Ball的paint里

    private fun initBalls(){
        thread {
            var x=0
            while(x<bpW){
                val xadd=Math.min(split,bpW-x)//防止超出图片大小,会发生异常,
                var y=0
                while (y<bpH){
                    val yadd=Math.min(split,bpH-y)
                    val bp=Bitmap.createBitmap(bitmap,x,y,xadd,yadd)//获取当前拼图的图片
                    var ball=Ball(x,y,Random().nextInt(20)-10).apply {
                        p.setShader(BitmapShader(bp,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT))
                        this.width=xadd
                        this.heigth=yadd
                    }
                    balls.add(ball)
                    y+=split
                }
                x+=split
            }
            println("balls size============${balls.size}")
        }
    }

4.爆炸开始

    fun startExplode(){
        if(ballsClone.size>0){
            return //防止多次点击,需要上次执行完毕才可以继续下一次
        }
        ballsClone.addAll(balls)//复制数据到另外一个集合里
        postInvalidateOnAnimation()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (isInEditMode) {
            return
        }
        //图片居中显示
        val startX = (width - bpW) / 2f
        val startY = (height - bpH) / 2f
        if (ballsClone.size == 0) {//非爆炸期间直接显示原图即可
            canvas.drawBitmap(bitmap, startX, startY, null)
            return
        }
        var i = 0
        while (i < ballsClone.size) {
            val ball = ballsClone[i]
            canvas.save()
            canvas.translate(ball.x + startX, ball.y + startY)
//                canvas.drawRect(0f,0f,ball.width+0f,ball.heigth+0f,ball.p)
            canvas.drawCircle(ball.width / 2f, ball.heigth / 2f, Math.min(ball.width, ball.heigth) / 2f, ball.p)
            canvas.restore()
            ball.update()
            if (ball.x < -startX || ball.x > width || ball.y > height) {//跑到屏幕外边的移除
                ballsClone.removeAt(i)
                ball.reset() //数据还原,下次使用
                i--
            }
            i++
        }
        postInvalidateOnAnimation()

    }

完整代码

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import com.charliesong.demo0327.R
import java.util.*
import kotlin.concurrent.thread
import kotlin.math.roundToInt

class ViewShowDot : View {
    constructor(context: Context?) : super(context) {
        initSomeThing()
    }

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        initSomeThing()
    }

    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        initSomeThing()
    }

    val ballsClone = arrayListOf<Ball>()//存储所有的碎片
    val balls = arrayListOf<Ball>()//存储所有的碎片
    var bpW = 0;//实际使用的图片的宽
    var bpH = 0;//高
    val split = 5//间隔
    lateinit var bitmap: Bitmap
    private fun initSomeThing() {
        if (isInEditMode) {
            return
        }
        // 对图片进行处理,大于300的进行缩小,然后获取到我们需要的图片
        val res = R.drawable.imager
        val option = BitmapFactory.Options()
        option.inJustDecodeBounds = true
        BitmapFactory.decodeResource(resources, res, option)
        val w = option.outWidth
        val h = option.outHeight
        option.inSampleSize = 1
        val wh = Math.max(w, h)
        if (wh > 300) {
            val size = Math.sqrt(h / 300.00).roundToInt()
            option.inSampleSize = size
        }
        option.inJustDecodeBounds = false

        bitmap = BitmapFactory.decodeResource(resources, res, option)
        bpW = bitmap.width;
        bpH = bitmap.height;

        println("w/h========${bpW}/${bpH}=====${w}/$h")
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (isInEditMode) {
            return
        }
        //图片居中显示
        val startX = (width - bpW) / 2f
        val startY = (height - bpH) / 2f
        if (ballsClone.size == 0) {//非爆炸期间直接显示原图即可
            canvas.drawBitmap(bitmap, startX, startY, null)
            return
        }
        var i = 0
        while (i < ballsClone.size) {
            val ball = ballsClone[i]
            canvas.save()
            canvas.translate(ball.x + startX, ball.y + startY)
//                canvas.drawRect(0f,0f,ball.width+0f,ball.heigth+0f,ball.p)
            canvas.drawCircle(ball.width / 2f, ball.heigth / 2f, Math.min(ball.width, ball.heigth) / 2f, ball.p)
            canvas.restore()
            ball.update()
            if (ball.x < -startX || ball.x > width || ball.y > height) {//跑到屏幕外边的移除
                ballsClone.removeAt(i)
                ball.reset() //数据还原,下次使用
                i--
            }
            i++
        }
        postInvalidateOnAnimation()

    }

    private fun initBalls() {
        thread {
            var x = 0
            while (x < bpW) {
                val xadd = Math.min(split, bpW - x)
                var y = 0
                while (y < bpH) {
                    val yadd = Math.min(split, bpH - y)
                    val bp = Bitmap.createBitmap(bitmap, x, y, xadd, yadd)
                    var ball = Ball(x, y, Random().nextInt(20) - 10).apply {
                        p.setShader(BitmapShader(bp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT))
                        this.width = xadd
                        this.heigth = yadd
                    }
                    balls.add(ball)
                    y += split
                }
                x += split
            }
            println("balls size============${balls.size}")
        }
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        balls.clear()
        initBalls()
    }

    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        repeat(balls.size) {
            val ball = balls[it]
            ball.p.reset()
        }
        balls.clear()
        if (!bitmap.isRecycled) {
            bitmap.recycle()
        }
    }

    fun startExplode() {
        if (ballsClone.size > 0) {
            return //防止多次点击,需要上次执行完毕才可以继续下一次
        }
        ballsClone.addAll(balls)
        postInvalidateOnAnimation()
    }

}

相关文章

  • 图片分割爆炸效果

    简介 简单实现下,模拟爆炸,这里就简单将图片分成N块,类似拼图,完事,给予x方向和y方向一个加速度移动这里只是想到...

  • 「PPT疗程」 形状填充图片

    图片被形状分割的效果 今天分享的这个技巧是利用形状的填充,达到图片连续分割的效果,并且不需要真的去分割图片(分割图...

  • 【Tank】8.0 爆炸效果实现、老巢、boss碰撞检测

    爆炸效果实现 爆炸效果主要为8张gif图片依次切换显示组成。src/model/abstract/Abstract...

  • UITableView分割线延长,设置偏移量

    原始UITableViewCell添加图片以后,分割线不会覆盖整条,效果不是很好,需要将分割线延伸到图片 ,(最左...

  • 如何使用彩铅画出爆炸的效果?

    本文由“学美术上美术集网校”分享,图片素材来自网络,仅供学习分享! 怎么画好爆炸效果?如何描绘爆炸效果? 描绘爆炸...

  • 14.8 pygame射击游戏(五)

    爆炸效果 我们给子弹击中敌舰增加一下爆炸效果。首先,我们把爆炸图片添加到assets里。修改enemy.py文件:...

  • PS教程:图片分割效果

    图片没创意,试试这样做。本章主要是针对图层样式的应用,来实现图片分割的效果,一起来学习吧~ (温馨提示:主要掌握的...

  • 简书编辑排版技巧

    倾斜 效果 加入代码 加入文本 哈哈效果呵呵 添加图片并描述 引用状态 效果 标题状态 效果 分割线: 列表状态 ...

  • CoreAnimation | 核心动画 | 粒子动画 | 点赞

    效果展示 效果分析 图片变了大小变了爆炸效果(CAEmitterLayer) 属性创建 粒子动画初始化以及属性之间...

  • markdowm语法

    一、标题 二、字体 三、引用 效果 引用二级引用多级引用 四、分割线 五、图片 六、超链接 七、列表 效果 无序列...

网友评论

    本文标题:图片分割爆炸效果

    本文链接:https://www.haomeiwen.com/subject/bpkgrqtx.html