新年新气象，上班第一天称工作不忙，想着整理一下之前的项目，有几个好的idea想分享一下。
在之前项目需求中有个扭蛋器的功能需求，由于之前也没有做过摇奖机或者2d动画的经验，于是采取了码奴常用手段baidu，但是都没有合适的效果。偶然间看到摩拜单车的贴纸动画效果还不错，于是扒了一波。（原项目地址：https://github.com/andmizi/MobikeTags）
要想在android项目中实现类似效果需要引入jbox2d内库（ https://github.com/jbox2d/jbox2d），在我的项目中我修改了作者的 Mobike和MobikeView两个类，达到以上效果。
```
public class JumpingViewextends FrameLayout {
private Jumpingjumping;
private ArrayListheadList =new ArrayList<>();
public JumpingView(@NonNull Context context) {
this(context, null);
}
public JumpingView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setWillNotDraw(false);
jumping =new Jumping(this);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
jumping.onSizeChanged(w, h);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
jumping.onLayout(changed);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
jumping.onDraw(canvas);
}
public JumpinggetJumping() {
return this.jumping;
}
int maxSize =ConvertUtils.dp2px(50);
int middleSize = ConvertUtils.dp2px(40);
int minSize = ConvertUtils.dp2px(35);
int page = ConvertUtils.dp2px(30);
int item = ConvertUtils.dp2px(1);
Randomrandom =new Random();
private int[]img_bg = {
com.touchtogame.funbox.R.drawable.ball_1,
com.touchtogame.funbox.R.drawable.ball_6,
com.touchtogame.funbox.R.drawable.ball_7,
com.touchtogame.funbox.R.drawable.ball_8,
};
public void addView() {
for (int i =0; i <3; i++) {
ImageView imageView =new ImageView(getContext());
imageView.setImageResource(img_bg[i]);
LinearLayout linearLayout =new LinearLayout(getContext());
linearLayout.setBackgroundResource(img_bg[i]);
int size =random.nextInt(middleSize) % (middleSize -minSize +item) +minSize;
LayoutParams layoutParams =new LayoutParams(size, size);
layoutParams.gravity = Gravity.CENTER;
this.addView(linearLayout, layoutParams);
setBallLayout(linearLayout);
if (i ==2) {
imageView.setTag(R.id.jump_view_circle_tag, false);
}else {
imageView.setTag(R.id.jump_view_circle_tag, true);
}
}
}
public void addViewImage() {
for (int i =0; i
RelativeLayout linearLayout =new RelativeLayout(getContext());
RoundedImageView rImageView =new RoundedImageView(getContext());
headList.add(rImageView);
rImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
LayoutParams params1 =new LayoutParams(MATCH_PARENT, MATCH_PARENT);
params1.gravity = Gravity.CENTER;
rImageView.setLayoutParams(params1);
rImageView.setPadding(3, 3, 3, 3);
rImageView.setOval(true);
linearLayout.addView(rImageView);
LayoutParams params =new LayoutParams(MATCH_PARENT, MATCH_PARENT);
ImageView imageView =new ImageView(getContext());
imageView.setLayoutParams(params);
linearLayout.addView(imageView);
ImageView imageView2 =new ImageView(getContext());
imageView2.setImageResource(R.drawable.ball_head);
linearLayout.addView(imageView2);
int size =random.nextInt(maxSize) % (maxSize -middleSize +item) +middleSize;
LayoutParams layoutParams2 =new LayoutParams(size, size);
layoutParams2.gravity = Gravity.CENTER;
this.addView(linearLayout, layoutParams2);
setBallLayout(linearLayout);
if (i ==img_bg.length-2) {
linearLayout.setTag(R.id.jump_view_circle_tag, false);
}else {
linearLayout.setTag(R.id.jump_view_circle_tag, true);
}
}
}
/*
* 设置球所在的位置*/
public void setBallLayout(View view) {
int x =random.nextInt(getWidth() -maxSize);
int y =random.nextInt(getHeight() -maxSize);
MarginLayoutParams margin =new MarginLayoutParams(view.getLayoutParams());
margin.setMargins(x, y, x + margin.width, y + margin.height);
LayoutParams layoutParams =new LayoutParams(margin);
view.setLayoutParams(layoutParams);
}
}
public void updateImage(List urls) {
ImageView imageView;
String url;
for (int i =headList.size()-1; i >0; i--) {
imageView =headList.get(i);
url = urls.get(i);
if (EmptyUtils.isNotEmpty(url)) {
ImageLoader.loadImage(imageView, url, ConvertUtils.dp2px(90),ConvertUtils.dp2px
(90));
}
}
```
由于简书视频限制没办法放动态图，在Mobike这个类中设置好，摩擦系数, 密度 ,能量损失率,与屏幕的比率这些参数之后，实现的效果还是比较顺眼的，当然只是给大家一个参考。
网友评论