模拟抽奖的九宫格动画效果

java类:RandomView 

package com.example.drawablerander.view;



import java.util.ArrayList;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;


/**
 * 模拟随机中奖的九宫格:
 * 
 * 
 * 
 */
@SuppressLint("ClickableViewAccessibility")
public class RandomView extends View {
private String TAG = RandomView.class.getSimpleName();
private Bitmap mBitmapSrc;
private Bitmap blackBitmap;
private Paint paint = new Paint();
private Bitmap[] bitmaps = new Bitmap[12];
private boolean startOpenThreadFlag = false;
private float fouceX = 0;
private float fouceY = 0;


public RandomView(Context context) {
super(context);
intView();


}


public RandomView(Context context, AttributeSet attrs) {
super(context, attrs);
intView();
}


public RandomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
intView();
}


private int bitmapSrcW;
private int bitmapSrcH;
private int xBitmapW;
private int xBitmapH;


/**
* 初始化
*/
private void intView() {


BitmapDrawable bitmap = (BitmapDrawable) getBackground();
mBitmapSrc = bitmap.getBitmap();
bitmapSrcW = mBitmapSrc.getWidth();
bitmapSrcH = mBitmapSrc.getHeight();
xBitmapW = bitmapSrcW / 4;
xBitmapH = bitmapSrcH / 4;


blackBitmap = Bitmap.createBitmap(xBitmapW, xBitmapH, Config.RGB_565);


}


@SuppressLint("NewApi")
@Override
public boolean onTouchEvent(MotionEvent event) {
float eventX = 0;
float eventY = 0;
float centerMin_x = getOnTouchCenterFectMinX();// 获取点击事件的中间区域的最小坐标值;
float centerMin_y = getOnTouchCenterFectMinY();// 获取点击事件的中间区域的最小坐标值;
float centerMax_x = getOnTochCenterMaxX();
float centerMax_y = getOnTochCenterMaxY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
eventX = event.getX();
eventY = event.getY();


if (centerMin_x < eventX && eventX < centerMax_x
&& centerMin_y < eventY && eventY < centerMax_y) {

startOpenThreadFlag = true;
Log.d(TAG, "startOpenThreadFlag="+startOpenThreadFlag);
if (myThread == null) {
myThread = new Mythread();
myThread.start();
}


}


Log.d(TAG, "eventX---=" + eventX);
Log.d(TAG, "eventY---=" + eventY);


break;
case MotionEvent.ACTION_UP:
// startOpenThreadFlag = false;


break;
case MotionEvent.ACTION_MOVE:


break;


default:
break;
}


return true;


}


/**
* 获取点击区域的最大值;

* @return
*/
private float getOnTochCenterMaxY() {


return dstHeight * 3;
}


/**
* 获取点击区域的最大值;

* @return
*/
private float getOnTochCenterMaxX() {


return dstWidth * 3;
}


/**
* 获取点击事件的中间区域的起始x坐标

* @return
*/
private float getOnTouchCenterFectMinX() {
return dstWidth;


}


/**
* 获取中间区域的其实坐标;

* @return
*/


private float getOnTouchCenterFectMinY() {
return dstHeight;
}


private int mViewH;
private int mViewW;
private Bitmap endBitmap;
private Bitmap scaledBitmap;
private int dstWidth;// 屏幕单个小格子的宽度;
private int dstHeight;// 屏幕单个小格子的高度;


@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mViewW = getWidth();
mViewH = getHeight();
dstWidth = mViewW / 4;
dstHeight = mViewH / 4;


endBitmap = creatScaleBitmap(blackBitmap);
scaledBitmap = creatScaleBitmapsrc();


spiltScaledBitmap();


drawSub(canvas);


}


private ArrayList<SmallFramView> framViews;


/**
* 分割缩放后的源资源图片
*/
private void spiltScaledBitmap() {
framViews = new ArrayList<SmallFramView>();
bitmapSrcW = scaledBitmap.getWidth();
bitmapSrcH = scaledBitmap.getHeight();
Log.d(TAG, "bitmapSrcW" + bitmapSrcW);
Log.d(TAG, "bitmapSrcH" + bitmapSrcH);


xBitmapW = bitmapSrcW / 4;
xBitmapH = bitmapSrcH / 4;
addData();


}


private void addData() {
addFirst();
addSecondRight();
addThirdRight();
addBottom();
addThirdLeft();
addSecondLeft();
}


private void addFirst() {
for (int i = 0; i < 4; i++) {// 第一行,
if (i < 4) {
bitmaps[i] = Bitmap.createBitmap(scaledBitmap, xBitmapW * i, 0,
xBitmapW, xBitmapH);
SmallFramView framView = new SmallFramView();
framView.setBitmap(bitmaps[i]);
framView.setId(i);
framView.setPostx(xBitmapW * i);
framView.setPosty(0);
framViews.add(framView);


}


}
}


/**
     * 
     */
private void addSecondLeft() {
bitmaps[11] = Bitmap.createBitmap(scaledBitmap, 0, xBitmapH * 1,
xBitmapW, xBitmapH);


SmallFramView framView = new SmallFramView();
framView.setBitmap(bitmaps[11]);
framView.setId(11);
framView.setPostx(0);
framView.setPosty(xBitmapH * 1);
framViews.add(framView);


}


private void addThirdLeft() {
bitmaps[10] = Bitmap.createBitmap(scaledBitmap, 0, xBitmapH * 2,
xBitmapW, xBitmapH);


SmallFramView framView = new SmallFramView();
framView.setBitmap(bitmaps[10]);
framView.setId(10);
framView.setPostx(0);
framView.setPosty(xBitmapH * 2);
framViews.add(framView);


}


private void addBottom() {
for (int i = 0; i < 4; i++) {


bitmaps[6 + i] = Bitmap.createBitmap(scaledBitmap, xBitmapW
* (3 - i), xBitmapH * 3, xBitmapW, xBitmapH);
SmallFramView framView = new SmallFramView();
framView.setBitmap(bitmaps[6 + i]);
framView.setId(6 + i);
framView.setPostx(xBitmapW * (3 - i));
framView.setPosty(xBitmapH * 3);
framViews.add(framView);


}


}


/**
* 添加第三行右边的;
*/
private void addThirdRight() {


bitmaps[5] = Bitmap.createBitmap(scaledBitmap, xBitmapW * 3,
xBitmapH * 2, xBitmapW, xBitmapH);
SmallFramView framView = new SmallFramView();
framView.setBitmap(bitmaps[5]);
framView.setId(7);
framView.setPostx(xBitmapW * 3);
framView.setPosty(xBitmapH * 2);
framViews.add(framView);


}


/**
* 添加第二行右边的格子;
*/
private void addSecondRight() {
bitmaps[5] = Bitmap.createBitmap(scaledBitmap, xBitmapW * 3,
xBitmapH * 1, xBitmapW, xBitmapH);
SmallFramView framView = new SmallFramView();
framView.setBitmap(bitmaps[5]);
framView.setId(5);
framView.setPostx(xBitmapW * 3);
framView.setPosty(xBitmapH * 1);
framViews.add(framView);


}


/**
* 把原始图片缩放到等相对应的单个小格子屏幕尺寸大小;

* @param bitmap
* @return
*/
private Bitmap creatScaleBitmap(Bitmap bitmap) {


return Bitmap.createScaledBitmap(bitmap, dstWidth, dstHeight, true);


}


/**
* 原图缩放到显示控件区域大小;

* @return
*/
private Bitmap creatScaleBitmapsrc() {
return Bitmap.createScaledBitmap(mBitmapSrc, mViewW, mViewW, true);


}


private Thread myThread;


private void drawSub(Canvas canvas) {


SmallFramView framView = framViews.get(count);
canvas.drawBitmap(endBitmap, framView.getPostx(), framView.getPosty(),
paint);





}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(setmeasuredWidth(widthMeasureSpec),
setMeasuredHeight(heightMeasureSpec));


}


private int count = 0;


public class Mythread extends Thread {


public Mythread() {


}


@Override
public void run() {


while (startOpenThreadFlag) {
count++;
if (count == bitmaps.length) {
count = 0;
}
postInvalidate();
try {
Thread.sleep(500);
} catch (InterruptedException e) {


e.printStackTrace();
}


}


}
}


/**
* 对宽度重新设置默认值;

* @param widthMeasureSpec
* @return
*/
private int setmeasuredWidth(int widthMeasureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);


if (specMode == MeasureSpec.EXACTLY) {// fill


result = specSize;
} else {
result = 200;
if (specMode == MeasureSpec.AT_MOST) {// wrap
result = Math.min(result, specSize);
}


}


return result;
}


/**
* 对高度重新测量

* @param heightMeasureSpec
* @return
*/
private int setMeasuredHeight(int heightMeasureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(heightMeasureSpec);
int specSize = MeasureSpec.getSize(heightMeasureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = 200;
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}


}


return result;
}


}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

java类:


package com.example.drawablerander.view;


import android.graphics.Bitmap;


public class SmallFramView {
private int id;


private Bitmap bitmap;


private int postx;// x坐标


private int posty;// y坐标


public SmallFramView() {


}


public int getId() {
return id;
}


public void setId(int id) {
this.id = id;
}


public Bitmap getBitmap() {
return bitmap;
}


public void setBitmap(Bitmap bitmap) {
this.bitmap = bitmap;
}


public int getPostx() {
return postx;
}


public void setPostx(int postx) {
this.postx = postx;
}


public int getPosty() {
return posty;
}


public void setPosty(int posty) {
this.posty = posty;
}


}



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的JS实现顺时针抽奖九宫格的示例代码: HTML部分: ```html <div id="lottery"> <ul> <li><img src="img/1.png"></li> <li><img src="img/2.png"></li> <li><img src="img/3.png"></li> <li><img src="img/4.png"></li> <li><img src="img/5.png"></li> <li><img src="img/6.png"></li> <li><img src="img/7.png"></li> <li><img src="img/8.png"></li> <li><img src="img/9.png"></li> </ul> <div id="btn">开始抽奖</div> </div> ``` CSS部分: ```css #lottery { width: 400px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; } #lottery ul { width: 300px; height: 300px; margin: 50px auto; position: relative; transform: rotate(0deg); transform-origin: center center; } #lottery ul li { width: 100px; height: 100px; float: left; position: absolute; left: 0; top: 0; text-align: center; } #lottery ul li img { width: 80px; height: 80px; margin-top: 10px; } #btn { width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: #f00; color: #fff; position: absolute; left: 50%; bottom: 30px; margin-left: -50px; cursor: pointer; border-radius: 5px; } ``` JS部分: ```javascript var lottery = { index: -1, // 当前转动到哪个位置,起点位置 count: 0, // 总共有多少个位置 timer: null, // 定时器 speed: 20, // 初始转动速度 times: 0, // 转动次数 cycle: 50, // 转动基本次数:即至少需要转动多少次再进入抽奖环节 prize: -1, // 中奖位置 init: function(id) { if ($("#" + id).find(".lottery-unit").length > 0) { $lottery = $("#" + id); $units = $lottery.find(".lottery-unit"); this.obj = $lottery; this.count = $units.length; $lottery.find(".lottery-unit-" + this.index).addClass("active"); } }, roll: function() { var index = this.index; var count = this.count; var lottery = this.obj; $(lottery).find(".lottery-unit-" + index).removeClass("active"); index += 1; if (index > count - 1) { index = 0; } $(lottery).find(".lottery-unit-" + index).addClass("active"); this.index = index; return false; }, stop: function(index) { this.prize = index; return false; } }; function roll() { lottery.times += 1; lottery.roll(); if (lottery.times > lottery.cycle + 10 && lottery.index == lottery.prize) { clearTimeout(lottery.timer); lottery.prize = -1; lottery.times = 0; $("#btn").removeClass("disabled"); } else { if (lottery.times < lottery.cycle) { lottery.speed -= 10; } else if (lottery.times == lottery.cycle) { var index = Math.random() * (lottery.count) | 0; lottery.prize = index; } else { if ( lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1) ) { lottery.speed += 110; } else { lottery.speed += 20; } } if (lottery.speed < 40) { lottery.speed = 40; } lottery.timer = setTimeout(roll, lottery.speed); } return false; } $(function() { lottery.init("lottery"); $("#btn").click(function() { if ($("#btn").hasClass("disabled")) { return false; } else { $("#btn").addClass("disabled"); lottery.speed = 100; roll(); return false; } }); }); ``` 这里使用了一个对象`lottery`,包含了初始化、滚动、停止等方法,同时在HTML中加入了一个抽奖的按钮。在点击按钮时,会触发抽奖动画,然后随机选中一个奖项并停止。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值