用用objectAnimator组合动画实现了翻牌效果

本文介绍了如何利用objectAnimator创建翻牌效果,旨在熟悉该属性动画的用法。通过简洁的代码示例,演示了翻头牌动画的实现过程,并提供了下载链接和讨论群,供读者进一步学习和交流。
摘要由CSDN通过智能技术生成

无聊写了一下 翻头牌的效果。享受了一把 皇帝翻妃子的快感。因为这个 小demo很简单,就是用来熟悉一下objectAnimator的大概用法,所以我们深入浅出,直接上代码。

代码结构很简单;

anim_in 这个动画类xml

<?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="@integer/anim_length"
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0"/>

    <objectAnimator
        android:duration="3000"
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0">
    </objectAnimator>
    <!--出现-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:startOffset="@integer/anim_half_length"
        android:valueFrom="0.0"
        android:valueTo="1.0"/>
</set>

在<set>标签中 进行 <objectAnimator>标签的动画组合&
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现翻牌效果动画可以使用CSS 3D转换和CSS动画实现。以下是实现的步骤: 1. 创建一个容器,用于包含翻转的两个面。 2. 给容器添加一个透视效果,使其能够呈现出三维效果。 ``` .container { perspective: 1000px; } ``` 3. 创建两个面,分别用于显示正面和背面的内容,并将它们放置在容器中。 ``` <div class="container"> <div class="card"> <div class="front">正面</div> <div class="back">背面</div> </div> </div> ``` 4. 使用CSS 3D转换将背面旋转180度,并设置初始状态为不可见。 ``` .card { transform-style: preserve-3d; transition: all 0.5s ease; } .back { transform: rotateY(180deg); display: none; } ``` 5. 使用CSS动画在容器的鼠标悬停事件时触发翻转效果,并切换正反面的可见状态。 ``` .container:hover .card { transform: rotateY(180deg); } .container:hover .card .front { display: none; } .container:hover .card .back { display: block; } ``` 完整的代码如下: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>翻牌效果动画</title> <style> .container { perspective: 1000px; width: 200px; height: 200px; } .card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.5s ease; } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .front { background-color: #e74c3c; color: #fff; } .back { background-color: #2ecc71; color: #fff; transform: rotateY(180deg); display: none; } .container:hover .card { transform: rotateY(180deg); } .container:hover .card .front { display: none; } .container:hover .card .back { display: block; } </style> </head> <body> <div class="container"> <div class="card"> <div class="front">正面</div> <div class="back">背面</div> </div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值