Android动画(翻牌抽奖)
Android动画(翻牌抽奖)
由于公司产品的需求,需要写一个翻牌抽奖的功能,故而写了一个.走了不少弯路,用了三种方法,最终用了最为简单的一种,现将三种方法记录如下:
老规矩,先上效果图!
下面分几个步骤来讲解,主要有布局文件/动画文件/调用方法/点击后的处理等!
布局及动画
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:background="#fff"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 标题栏 --><RelativeLayout
android:id="@+id/relativeLayout_Title_Draw"android:layout_width="match_parent"android:layout_height="50dp"android:background="#fff"><ImageView
android:id="@+id/imageView_DrawTitle_Return"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerVertical="true"android:layout_margin="10dp"android:padding="5dp"android:src="@mipmap/user_back" /><TextView
android:id="@+id/textView_DrawTitle_Title"android:layout_width="wrap_content"android:layout_height="30dp"android:layout_centerInParent="true"android:ellipsize="end"android:gravity="center"android:singleLine="true"android:text="好礼送不停"android:textColor="#222"android:textSize="16sp" /><LinearLayout
android:orientation="horizontal"android:layout_alignParentRight="true"android:layout_marginRight="16dp"android:layout_width="wrap_content"android:layout_height="match_parent"><ImageView
android:id="@+id/imageView_DrawTitle"android:src="@mipmap/mine_hb"android:layout_gravity="center"android:layout_width="30dp"android:layout_height="30dp" /></LinearLayout><View
android:layout_width="match_parent"android:layout_height="1px"android:layout_alignParentBottom="true"android:background="#dbdbdb" /></RelativeLayout><!-- 背景图 --><ImageView
android:id="@+id/imageView_Draw_Background"android:background="@mipmap/bg_draw"android:layout_marginTop="50dp"android:layout_width="match_parent"android:layout_height="match_parent" /><!-- 规则 --><ImageView
android:id="@+id/imageView_Draw_Rule"android:src="@mipmap/prize_rule"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_marginLeft="10dp"android:layout_marginTop="55dp"android:padding="10dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><!-- 我的奖品 --><ImageView
android:id="@+id/imageView_Draw_MinePrize"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:layout_marginTop="50dp"android:layout_width="60dp"android:layout_height="60dp" /><!-- 剩余抽奖次数 --><TextView
android:id="@+id/textView_Draw_Nums"android:gravity="center"android:textColor="#ffffff"android:textSize="14sp"android:text="今日剩余抽奖次数 8 次"android:layout_marginTop="230dp"android:layout_width="match_parent"android:layout_height="30dp" /><!-- 抽奖 View --><GridView
android:id="@+id/drawview_Draw_Detail"android:gravity="center"android:verticalSpacing="20dp"android:layout_marginTop="260dp"android:padding="10dp"android:numColumns="3"android:layout_width="match_parent"android:layout_height="wrap_content" /><LinearLayout
android:id="@+id/linearLayout_Prize_Draw"android:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="70dp"><ImageView
android:layout_weight="1"android:padding="12dp"android:src="@mipmap/cup"android:layout_width="0dp"android:layout_height="match_parent" /><ImageView
android:layout_weight="1"android:padding="12dp"android:src="@mipmap/bear"android:layout_width="0dp"android:layout_height="match_parent" /><ImageView
android:layout_weight="1"android:padding="12dp"android:src="@mipmap/gift"android:layout_width="0dp"android:layout_height="match_parent" /><ImageView
android:layout_weight="1"android:padding="12dp"android:src="@mipmap/hb"android:layout_width="0dp"android:layout_height="match_parent" /><ImageView
android:layout_weight="1"android:padding="12dp"android:src="@mipmap/phone"android:layout_width="0dp"android:layout_height="match_parent" /></LinearLayout><ImageView
android:id="@+id/imageView_Cards_Animation"android:visibility="gone"android:src="@mipmap/xg"android:layout_centerVertical="true"android:layout_centerHorizontal="true"android:layout_centerInParent="true"android:layout_width="220dp"android:layout_height="260dp" /></RelativeLayout>
主要布局就是GridView!其中的6个item就是用于翻拍的纸牌!注意最下面的ImageView,初始时设置他的visibility=”gone”,当点击到gridview的item时,再显示出来并进行反转,即为大图的反转效果!
动画xml:
动画效果展示,可以通过xml配置,也可以在代码中设置.另外再推荐一个第三方库文件,也可以进行翻转,并且更加酷炫,不过他的翻转效果只能展示一次,和我的需求不同,虽然功能很强大,但是对我的项目没啥帮助,不过以后有人有这种需求的话可以直接使用,貌似是一个德国人写的库,git的链接在这里Rotatable()!
我先将xml配置的方法写下:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"android:interpolator="@android:anim/overshoot_interpolator"android:fromXDelta="0"android:toXDelta="-200"android:fromYDelta="0"android:toYDelta="-200"android:duration="2000"android:fillAfter="true"/>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><!--消失--><objectAnimator
android:duration="0"android:propertyName="alpha"android:valueFrom="1.0"android:valueTo="0.0"/><!--旋转--><objectAnimator
android:duration="600"android:propertyName="rotationY"android:valueFrom="-180"android:valueTo="0"/><!--出现--><objectAnimator
android:duration="0"android:propertyName="alpha"android:startOffset="300"android:valueFrom="0.0"android:valueTo="1.0"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="false"><!-- 缩小动画 --><scale
android:duration="300"android:fromXScale="1"android:fromYScale="1"android:pivotX="50%"android:pivotY="50%"android:startOffset="300"android:toXScale="0.5"android:toYScale="0.5" /><!-- 放大动画 --><scale
android:duration="300"android:fromXScale="1"android:fromYScale="1"android:pivotX="50%"android:pivotY="50%"android:toXScale="2"android:toYScale="2" /></set>
主要就使用到了这三个动画!
- 代码
思路如下,首先是自定义adapter,设置好item的布局,在adapter中设定好点击事件,当用户点击时出现大图进行反转!talk is shit, show you code!
建议将adapter和点击事件单独取出为一个类文件!
Adapter文件如下
public class GridViewAdapter extends BaseAdapter {List<String> cardsList = new ArrayList<>();public boolean refreshGridData(List<String> list) {if (list != null && list.size() > 0) {cardsList.clear();cardsList.addAll(list);notifyDataSetChanged();return true;}return false;}@Overridepublic int getCount() {return cardsList == null ? 0 : cardsList.size();}@Overridepublic Object getItem(int position) {return cardsList == null ? null : cardsList.get(position);}@Overridepublic long getItemId(int position) {return position;}GridViewAdapter.ViewHolder holder = null;@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// 1、如果没有可利用item时,找出所有控件if (convertView == null) {holder = new GridViewAdapter.ViewHolder();convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.doubledealer_gv_item, parent, false);
// holder.textView = (TextView) convertView.findViewById(R.id.tv);holder.imageView = convertView.findViewById(R.id.imageView_Cards);holder.myLayout = convertView.findViewById(R.id.myLayout);holder.drawView = convertView.findViewById(R.id.drawView);convertView.setTag(holder);} else {// 3、有可利用的item时就获取赋值使用holder = (GridViewAdapter.ViewHolder) convertView.getTag();}if (mFlag) {// 监听点击事件holder.myLayout.setClickable(true);holder.myLayout.setOnClickListener(newMyClickListener(holder, cardsList, position));} else {// 监听点击事件holder.myLayout.setClickable(false);if (clickPosition != position) {holder.drawView.start();
// holder.drawView.setCardBackground(Color.parseColor("#B0E2FF"));
// holder.drawView.setText(cardsList.get(position) + "");
// holder.imageView.setVisibility(View.VISIBLE);
// holder.drawView.setImage(BitmapFactory.decodeResource(
// getResources(), R.mipmap.cup
// ));
// imageView_Cards_Animation.setVisibility(View.VISIBLE);setOvershotAnim();}}return convertView;}private class ViewHolder {ImageView imageView;LinearLayout myLayout;DrawView drawView;}}
点击事件的方法类也是类似,这个相信很简单了,不贴了,累死了……….
然后就是在Activity中进行调取,包括动画效果的调取和逻辑处理等:
/********************动画效果**************************/// 插值器设置 OvershootInterpolatorprivate Animation overshotAnim;@SuppressLint("ResourceType")private void setOvershotAnim() {overshotAnim = AnimationUtils.loadAnimation(this, R.anim.scaleanim_overshot);imageView_Cards_Animation.startAnimation(overshotAnim);largeAnimStart();}@SuppressLint("ResourceType")private void largeAnimStart() {imageView_Cards_Animation.setVisibility(View.VISIBLE);// 放大Animation largeAnim;largeAnim = AnimationUtils.loadAnimation(this, R.animator.enlarge);imageView_Cards_Animation.startAnimation(largeAnim);imageAnimationStart();}// 旋转private Handler handler;private final int ANIM_DURATION = 3000;private void imageAnimationStart() {handler = new Handler();runAnimation(R.id.imageView_Cards_Animation, Rotatable.ROTATE_Y,360, 100);}/*** 动画进程** @param resID 位置* @param direction 方向* @param degree 度数* @param delay 延时*/private void runAnimation(final int resID, final int direction,final int degree, int delay) {handler.postDelayed(new Runnable() {@Overridepublic void run() {Rotatable rotatable = new Rotatable.Builder(findViewById(resID)).direction(Rotatable.ROTATE_BOTH).build();rotatable.rotate(direction, degree, ANIM_DURATION);}}, delay);// 开启弹窗
// startDialog();}
此时我大图的旋转用的就是那个开源库,很舒服,可惜后面产品更换了需求,加了一个纸牌不停更换的功能,我就换了一种逻辑进行处理了.
此时的话,核心代码都已经贴出来了,另外在代码中直接添加动画的代码是:
private final int ANIM_DURATION = 1000;private ObjectAnimator animator;private void imageAnimationStart() {imageView_Cards_Animation_Test.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.xg));animator = ObjectAnimator.ofFloat(imageView_Cards_Animation_Test,View.ROTATION_Y, 0, 360).setDuration(ANIM_DURATION);animator.start();
至此的话,这个功能就能实现了,大家可以多多思考下,想直接要源码的话也可以,我把源码放在了我的github上了,clone的话可以,就是不要忘了给我加星星哦!
- 源代码CardsDraw
Android动画(翻牌抽奖)相关推荐
- lottie轻松实现复杂动画(抽奖举例)
官网:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported a ...
- vue 两种方式实现抽奖效果(九宫格、翻牌抽奖) -----(非TX游戏概率)
No.1 九宫格 1.1 九宫格抽奖使用的是组件lattice-lotteryhttps://h5-group.github.io/lattice-lottery/ # vue2 # 安装 sh np ...
- css实现翻牌抽奖效果
css实现翻牌抽奖效果 实现效果 React代码 css代码 总结 实现效果 React代码 import React,{FC,useEffect,useState} from 'react' imp ...
- 用html+js实现9宫格翻牌抽奖【建议收藏】
在前端浏览器页面,我们想实现抽奖的功能,铁子们可以朝这儿看齐,9个格子可以填写9份礼物,而且礼物可以控制位置,公司举办活动啥的直接就能用,方便实用: 1.效果展示 2.代码分享 <!DOCTYP ...
- js实现九宫格翻牌抽奖(怎么也抽不中大奖系列)
先来看一下效果: 实现原理: 将小奖品(即官方让你中奖的奖品)中添加一个中奖项状态,定义为true,以此即可产生中奖项与非中奖项两个数组:每次翻牌抽奖时就会从非中奖项中取最后一个,并从数组中移除该项 ...
- Android动画效果translate、scale、alpha、rotate详解
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...
- android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用 一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
- android动画的实现原理,Android动画的实现原理 .
1.动画运行模式 独行模式 中断模式 2.Animation类 每个动画都重载了父类的applyTransformation方法这个方法的主要作用是把一些属性组装成一个Transformation类, ...
- Android动画曲线库AndroidEasingFunctions
Android动画曲线库AndroidEasingFunctions AndroidEasingFunction是基于Easing Function(缓动函数)的Android动画曲线库.它提供了九大 ...
最新文章
- java异常处理之throw, throws,try和catch
- Android Studio 单刷《第一行代码》系列 06 —— Fragment 生命周期
- CTR预估中GBDT与LR融合方案
- shell编程系列26--大型脚本工具开发实战
- nrf52840 gpiote如何配置中断输入_51单片机外部中断点亮LED
- P3243 [HNOI2015]菜肴制作(拓扑排序、贪心)
- Express-start
- 那个说技术本身并不可耻的快播王欣回来了!
- 数据库原理(一)—— 关系代数
- ACL in 和 out
- wordpress配置邮箱发送功能
- 基于python微信群聊机器人开题报告
- 软考-计算机组成原理与结构
- 判断字符串是否是邮箱或者手机号码格式
- web漏洞扫描器原理_每周一喂丨用于渗透测试的10种漏洞扫描工具
- mysql 查询视图_MySQL查看视图
- uc投屏按钮不见了_网页投屏,网页视频怎么投屏到电视,
- 新CSDN文章转成PDF、打印(去空白)
- 尚硅谷SpringBoot学习笔记
- 苏州技师学院计算机专业怎么样,苏州技师学院是怎样的一个学校