仿美播登陆页面，实现九宫格图片翻转效果

最新推荐文章于 2022-10-28 10:01:06 发布
最新推荐文章于 2022-10-28 10:01:06 发布
阅读量1.5k 收藏 2
点赞数 2
分类专栏： Android 自定义控件进阶 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014608640/article/details/52992728
版权

MultipleFlipView

项目地址： LinLshare/MultipleFlipView
简介：仿美播登陆页面，实现九宫格图片翻转效果

效果

配置

compile 'io.github.linlsahre:MultipleFlipViewLib:0.1.1'

使用

  1. 在布局文件中引入 RandomFlipLayout

    <io.github.linlshare.MultipleFlipViewLib.RandomFlipLayout
android:id="@+id/rflayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

  2. 配置 RandomFlipLayout

    randomFlipLayout.setupWithImage(
       R.drawable.android_logo,
       R.drawable.login_cell_1, R.drawable.login_cell_1,
       R.drawable.login_cell_3, R.drawable.login_cell_4,
       R.drawable.login_cell_5, R.drawable.login_cell_6,
       R.drawable.login_cell_7, R.drawable.login_cell_8,
       R.drawable.login_cell_9, R.drawable.login_cell_10,
       R.drawable.login_cell_11, R.drawable.login_cell_12,
       R.drawable.login_cell_13, R.drawable.login_cell_14,
       R.drawable.login_cell_15, R.drawable.login_cell_16,
       R.drawable.login_cell_17, R.drawable.login_cell_18
);

  3. 开始 RandomFlip

    randomFlipLayout.startRandomFlip();
Wei_Leng
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android代码-FlipperLayout
08-06
FlipperView Android version of FlipperControl for UWP . Now it's written in Kotlin. A control that uses flip transition to change different states. Works on API 19, but with more tests I think it works well on API 16. How to use FlipperView extends from FrameLayout so you can use it as a FrameLayout but it only displays one child at a time and you can call next() to switch to another child. Please don't put views that do heavy work. It has a sample proj to demonstrate how to use it. There are a
Android自定义View-九宫格抽奖转盘（两种实现）
xiaomi987的专栏
02-22 2422
好久没写文章了，一来感觉自己技术没啥进步，二来各种杂事繁忙，以至于拖了许久。正好这个版本产品需求需要做一个九宫格样式的转盘抽奖机，感觉是个挺有意思的东西，把我的解决方案和中间遇到的问题发出来，供大家参考哈~ 两种方案，先看成品的效果 开始做这个功能的时候，跟产品确定效果，要求动画是先慢后快再变慢，我第一时间想到的就是插值器。AccelerateDecelerateInterpolator就是属于开始和结束很慢，中间速度较快的那种插值器，完美符合需求。接下来需要考虑怎么来实现九宫格。 第一种实现 我第一版
android翻转效果时钟
qq_41620230的博客
09-09 1548
android翻转效果时钟
android 多控件顺序翻转动画设计实现
farmer_cc的专栏
01-22 8303
android 翻转动画实现 自己的前几篇文章基本都是简单的把动画实现，能够看看效果。这次带来的翻转动画自然少不了的显示动画效果。 但这次多了实用性、可扩展性的考虑，把翻转动画不仅仅是针对个别iew的动画效果，而是一个可以翻转的layout，并实现接口flipable，具备一定的封装性；方便在添加其它控件，具备一定的扩展性，在例子中，也示例性地改变翻转内容，把layout中默认的textv
小组件简单实现刷新
qq_41620230的博客
10-28 703
小组件实现刷新
MultipleFlipView,仿美播登陆页面现九宫格图片翻转效.zip
10-13
MultipleFlipView,仿美播登陆页面现九宫格图片翻转效.zip
jquery实现上下翻转的网格图片导航效果
06-10
Grid Navigation Effects 网格图片导航效果，本实例提供了10种切换效果，大家可选择性下载使用
javafx实现图片3D翻转效果方法实例
09-05
程序实现思路: 在javafx中Node对象有一个effect属性，可以用于实现各种特效。PerspectiveTransform特效可以使Node对象实现透视变换。因此我们可以通过计算透视变换中每个点的位置来实现3D翻转特效。
java实现图片水平和垂直翻转效果
08-26
Java实现图片水平和垂直翻转效果 Java语言作为一种流行的编程语言，在图片处理方面提供了强大的支持。在本文中，我们将详细介绍Java实现图片水平和垂直翻转效果的方法，并提供了相关的代码示例。 一、图片翻转的...
利用纯css实现图片翻转的效果
09-24
在本文中，我们将探讨如何利用纯CSS实现图片翻转效果，这是一个常见的交互设计技术，能够为网站或应用增添动态感和趣味性。首先，我们来看一下实现这一效果的基本结构和关键CSS属性。 **HTML 结构** 为了实现翻转...
九宫格牌翻转游戏demo
05-08
java关键代码： mText = (TextView) findViewById(R.id.textView1); mImageView01 = (ImageView) findViewById(R.id.m1); mButton = (Button) findViewById(R.id.button1); randon(); mImageView01.setOnClickListener(new View.OnClickListener() { @SuppressWarnings("deprecation") public void onClick(View v) { if(check1 == true && num > 0 && num1 == false) { num--; num1 = true; choose1 = true; if(turn1 == false) { turnAnim(mImageView01,s1[0]); if(s1[0] == R.drawable.b) { num = 0 ; friendState = true; } turn1 = true; } } }); mButton.setOnClickListener(new Button.OnClickListener() { @SuppressWarnings("deprecation") public void onClick(View v) { friendState = false; xianshi = 3; mText.setText("还剩"+xianshi+"次机会。"); num = 3; }); } /*往回洗牌的动画*/ public void backAnim(final ImageView a) { Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.back_scale); animation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { a.setImageDrawable(getResources().getDrawable( R.drawable.pbg)); // bool = true; //通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView a.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.front)); } }); a.startAnimation(animation); } /*翻牌的动画*/ public void turnAnim(final ImageView a,final int b) { Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.back_scale); animation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { a.setImageDrawable(getResources().getDrawable(b)); // bool = true; //通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView a.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.front)); } }); a.startAnimation(animation); if (b == R.drawable.b) { mText.setText("哇！你猜对了噢！！拍拍手！"); } else { if(xianshi >= 1) { mText.setText("还剩"+xianshi+"次机会。"); } else{ mText.setText("机会已用完！"); } } } private void randon() { // TODO Auto-generated method stub for (int i = 0; i < 9; i++) { int tmp = s1[i]; int s = (int) (Math.random() * 9); s1[i] = s1[s]; s1[s] = tmp; } } } res/layout/activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".EX04_06" > <LinearLayout android:id="@+id/LayoutButtons3" android:layout_marginTop="5dp" android:layout_width="230dp" android:layout_height="95dp" android:layout_centerHorizontal="true" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/m1" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop"/> <ImageView android:id="@+id/m2" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop"/> <ImageView android:id="@+id/m3" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> </LinearLayout> <LinearLayout android:id="@+id/LayoutButtons4" android:layout_below="@+id/LayoutButtons3" android:layout_width="230dp" android:layout_height="95dp" android:layout_centerHorizontal="true" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/m4" android:layout_below="@+id/LayoutButtons3" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> <ImageView android:id="@+id/m5" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> <ImageView android:id="@+id/m6" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> </LinearLayout> <LinearLayout android:id="@+id/LayoutButtons5" android:layout_below="@+id/LayoutButtons4" android:layout_width="230dp" android:layout_height="95dp" android:layout_centerHorizontal="true" android:layout_weight="1" android:orientation="horizontal" > <ImageView android:id="@+id/m7" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> <ImageView android:id="@+id/m8" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> <ImageView android:id="@+id/m9" android:layout_margin= "2dp" android:layout_width="60dp" android:layout_height="90dp" android:layout_weight="1" android:src="@drawable/pbg" android:scaleType="centerCrop" /> </LinearLayout> <TextView android:id="@+id/textView1" android:layout_below="@+id/LayoutButtons5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="2dp" android:text="猜猜是哪张" android:textSize="20sp" /> <Button android:id="@+id/button1" android:layout_width="120dp" android:layout_height="60dp" android:layout_alignTop="@+id/textView1" android:layout_centerHorizontal="true" android:text="再玩一次！" /> </RelativeLayout> res/anim/back_ainm.xml: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:duration="150"/> </set> res/anim/front.xml: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <scale android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="1.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:duration="150"/> </set>
九宫格图片随机变换位置+倒计时（选对停止倒计时）
09-12
1、支持N张图片随机变换位置 2、抽对正确图片给出提示 3、页面加载开始倒计时 4、抽对图片倒计时停止
翻页效果的RecyclerView
擦肩的阳光的专栏
07-16 3906
实现一个自定义LayoutManager，默认只有一个抽象方法，实现的重点在于onLayoutChildren对页面的布局和滑动操作，当然还有缓存。 属性定义 mPosition是当前item的位置信息，mPositionOffset是偏移信息，mMinVy是最低的y方向的速度，这个需要根据不同屏幕尺寸来定。 private static final int MIN_VY = 300; pr...
图片与文字翻转效果
程序员小白的博客
07-13 1215
@toc在网页设计的过程中，有时候需要对文字或图形进行翻转； 下面介绍几种翻转的方法：rotateY 输入能让图片或文字水平镜像翻转； 例子1：使用 rotateY 属性翻转文字和图片 rotateX 属性能让文字或图片垂直镜像翻转； 例子2： 和 的 属性都能对文字或图片进行水平镜像翻转； 属性参数必须是 负数，否则不能完成翻转；参数数字越大翻转后图形或文字就会增大多少； 例子 3： 如上的水平镜像翻转的使用方法类似； 例子 4： 注意： 镜像翻转以轴为镜像，普通旋转以点为镜像；......
Matlab图像九宫格基本操作(翻转,镜像等)+位图操作
Braylon的博客
10-03 4533
这次blog提到的操作对于matlab来说都很基础，而且对于有编程和计算机基础的人来说也很简单，不过我一开始也是对于matlab的语法什么的一知半解，这里把我亲手写的东西push出来，小伙伴们共勉。 目标 废话不多说了 我们的目标就是成成一个这样的图： 和我选的图片有点粗糙，但是大家仔细看这里面的镜像图可别以为是原图。 大致就是，我们要选择一个图片作为原图（左上角的那一张），然后我们翻转，镜像，...
花式实现图片3D翻转效果
chen_zhang_yu的博客
01-19 7544
花式实现图片的3D翻转效果
HTML和CSS实现图片翻转效果
weixin_30315723的博客
08-20 7383
实现图片翻转，首先来分析一下我们希望实现的是怎样的翻转效果？又该如何去实现呢？ 一、希望实现的效果 页面上的图片在光标悬停在上面的时候会发生翻转效果，翻转过后显示出背面的说明文字。 鼠标没有悬停在上面的效果 鼠标悬停在其中一张图片上的效果： 二、实现方法 每幅图片的翻转效果都是沿着Y轴进行反转的，可以是用3D变换来实现这种效果...
html页面图片翻转特效代码,如何使用css实现翻转图片的效果
最新发布
06-11
以下是一个简单的HTML图片翻转特效的代码： ...<!... 图片翻转特效 ...使用CSS实现翻转图片的效果是通过`transform`属性来实现的，具体来说就是通过`rotateY()`函数来控制元素绕Y轴旋转的角度来实现翻转效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值