Android 仿卡片消消除
最近产品看到一个儿童趣味匹配游戏,叫**match,然后就叫客户端直接实现,然后新增到APP里的一个小模块里,看到这个也挺有意思的,就记录下来,下面先看看效果图吧:
效果看着挺简单,主要难点有两个,第一个动画处理,设计到旋转,缩放,透明度的处理;第二个难点就是这个item是放在recyclerview中的,因此这个数量是不固定的,可以自己增加,也可以改变gridview的摆放样子。
首先来看看动画方面吧,首先将一个卡片分为背面和正面两部分,点击卡片时候,卡片的旋转也是正面和背面的旋转,比如一个是从0到180度的旋转,那另外一个就是负的180度到0度的旋转,这样就能给人感觉是一体的,然后就是一个透明度的同时进行,一个是从不透明到透明的转变,另外一个是从透明到不透明的变化,如果正面和背面一起执行这样的变化,那么就整保证无缝连接的卡片旋转了。那么就来看看这个animator的xml是如何实现的吧:
card_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><!--在开始时是隐藏, 逆向旋转, 当旋转一半时, 显示卡片--><!--完全透明--><objectAnimatorandroid:propertyName="alpha"android:valueFrom="1.0"android:valueTo="0"android:duration="0"/><!--旋转--><objectAnimatorandroid:propertyName="rotationY"android:valueFrom="-180"android:valueTo="0"android:duration="1000"/><!--显示出来--><objectAnimatorandroid:propertyName="alpha"android:valueFrom="0.0"android:valueTo="1.0"android:duration="0"android:startOffset="500"/></set>
card_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><!--旋转180°, 当旋转一半时, 卡片消失.--><!--旋转180--><objectAnimatorandroid:propertyName="rotationY"android:valueFrom="0"android:valueTo="180"android:duration="1000"/><!--变成透明--><objectAnimatorandroid:propertyName="alpha"android:valueFrom="1.0"android:valueTo="0"android:startOffset="500"android:duration="0"/></set>
然后就是逻辑处理,遇到不相同卡片时候就将这个动画反着再执行一次,就能恢复到最开始点击之前的样子了。如果点击到相同的卡片,那么这时两卡片就要同时消失,这里需要一个消失的动画,及X轴和Y轴同时从1到0的缩放,透明度也是从1到0的缩放,这样就能让其消失了:
card_disappear.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><objectAnimatorandroid:propertyName="scaleX"android:valueFrom="1.0"android:valueTo="0"android:duration="1000"/><objectAnimatorandroid:propertyName="scaleY"android:valueFrom="1.0"android:valueTo="0"android:duration="1000"/><!--变成透明--><objectAnimatorandroid:propertyName="alpha"android:valueFrom="1.0"android:valueTo="0"android:startOffset="1000"android:duration="0"/></set>
第二个麻烦点就是给适配器增加一个接口回调,给卡片一个点击事件,但是这个点击事件要控制住两点,第一,正在执行动画的时候是不能点击的,要不然动画就会紊乱,第二,两个相同卡片消失之后也是不能继续点击的,这么就需要给卡片实体赋值一个变量,消失之后就改变这个变量,当再次点击就直接return掉就行了。对于第一个正在执行的动画,得在监听动画执行完毕之后,再通过适配器公共出来的api去改变这个flag标记,让其可以继续点击。下面就是适配器里的代码:
package com.leo.matchdemo;import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.viewholder.BaseViewHolder;import java.util.List;public class MatchAdapter extends BaseQuickAdapter<MatchBean, BaseViewHolder> {public MatchAdapter(List<MatchBean> data) {super(R.layout.item_match, data);}private boolean isCanClick = true;public void setClickAble(boolean isCanClick) {this.isCanClick = isCanClick;}@Overrideprotected void convert(final BaseViewHolder helper, final MatchBean result) {if (result == null) {return;}final RelativeLayout rl_content = helper.getView(R.id.rl_content);final ImageView im_back = helper.getView(R.id.im_back);final ImageView im_front = helper.getView(R.id.im_front);Glide.with(getContext()).asBitmap().load(result.getImgUrl()).into(im_back);if (result.isShowing()) {im_back.setVisibility(View.VISIBLE);im_front.setVisibility(View.VISIBLE);} else {im_back.setVisibility(View.GONE);im_front.setVisibility(View.GONE);}rl_content.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (isCanClick && result.isShowing()) {if (null != itemClickAction) {if (!result.isFrontFlag()) {itemClickAction.frontClick(result.getTargetId(), rl_content, im_back, im_front);result.setFrontFlag(!result.isFrontFlag());}}}}});}private ItemClickAction itemClickAction;public void setItemClickAction(ItemClickAction itemClickAction) {this.itemClickAction = itemClickAction;}public interface ItemClickAction {void frontClick(String matchingId, RelativeLayout contentView, ImageView backImg, ImageView frontImg);}}
但很重要很重要的一点就是在卡片相同匹配之后,不要notify适配器,这样就又会恢复原状了,这就达不到这个效果了。因此就直接将接口回调给页面里的view进行显示与消失的操作就行了。
如果需要demo下载,这里也附上下载链接:
https://download.csdn.net/download/greatdaocaoren/12752108
Android 仿卡片消消除相关推荐
- android 星星流逝动画,Android仿开心消消乐大树星星无限循环效果
啥都不说先上效果图,这个是我项目里的效果: 下面的是我抽取出来的 demo 适配啥的我基本上都做好了没做其他的 ok 下面 说一下思路把 首先 说一下原理 我是使用bitmap 创建两张图 一开始的时 ...
- android星星爆炸效果图,Android_Android仿开心消消乐大树星星无限循环效果,啥都不说先上效果图,这个是 - phpStudy...
Android仿开心消消乐大树星星无限循环效果 啥都不说先上效果图,这个是我项目里的效果: 下面的是我抽取出来的 demo 适配啥的我基本上都做好了没做其他的 ok 下面 说一下思路把 首先 说一下原 ...
- Android仿豆瓣FM卡片滑动
最近公司项目要做一个跟豆瓣FM卡片式滑动的效果,看看效果图: 卡片的滑动和伸缩功能都已做好测试跟豆瓣FM 1:1还原 package org.android.mygdttst.douban;impor ...
- android仿知乎按钮动效,Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解...
先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几 ...
- android右滑返回动画,Android仿微信右滑返回功能的实例代码
先上效果图,如下: 先分析一下功能的主要技术点,右滑即手势判断,当滑到一直距离时才执行返回,并且手指按下的位置是在屏幕的最左边(这个也是有一定范围的), 这些可以实现onTouchEvent来实现. ...
- android仿秒拍源码,你所不知道的程序员 程序员其实真的很…【Bus Weekly】三十六期...
原标题:你所不知道的程序员 程序员其实真的很-[Bus Weekly]三十六期 快,点击蓝色"字体"关注这个公众号,一起涨姿势- 现如今,程序员在中国的科技 圈可以说已经达到了举足 ...
- Android 仿支付宝蚂蚁森林动画效果
Android 动画可以归纳为以下几种: 视图动画(View 动画) 帧动画(Frame 动画.Drawable 动画) 属性动画 触摸反馈动画(Ripple Effect) 揭露动画(Reveal ...
- php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
- android tab 悬停效果代码,Android 仿腾讯应用宝 之 Toolbar +Scroolview +tab滑动悬停效果...
Android 仿腾讯应用宝 之 Toolbar +Scroolview +tab滑动悬停效果 来源:互联网 作者:佚名 时间:2015-02-10 15:36 Android 仿腾讯应用宝 之 To ...
最新文章
- 题目1191:矩阵最大值
- 怪物猎人服务器维护时间,怪物猎人云服务器
- mysql中表的约束,主键外键唯一键
- Spring源码:StopWatch 计时秒表
- shell脚本实现菜单操作
- 大数据开发之Hadoop---初始Hadoop
- js中数据结构数组Array、映射Map、集合Set、对象、JSON
- Beats:如何在 Elastic Stack 中得到并使用 Root CA Certificate fingerprint
- 【ES系列五】——集群搭建(多机集群单机多节点集群)
- 手把手带你学习Odoo OWL组件开发(1):认识 OWL
- 制作PE系统--20220202
- 什么是软件维护?在软件已经交付使用后,为了改正错误或满足新需求而修改软件的过程。它有哪几种类型?
- iphone 6plus 输出的屏幕尺寸 375 ,667的原因 - 简书
- 联想拯救者Y7000系统安装之路(Win10系统)
- ESP32-Arduino开发实例-与Arduino之间SPI通信
- 连你女朋友都能看懂的分布式架构原理!
- 分享3个CPU跑分数据库查询,AMD Inter cpu各项分数查询
- 在nodejs中将GBK转UTF
- JavaCV - 灰度图像归一化到0-255
- 落谷----P4994 终于结束的起点