Android属性动画 实战-视差动画

转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/118976533
本文出自【赵彦军的博客】

文章目录

效果图

先看看效果图:
在这里插入图片描述
从效果上看就是布局文件从从屏幕右侧飞入屏幕内,但不是一起飞入,而是有视差效果。

实例代码

我们先写布局:

<?xml version="1.0" encoding="utf-8"?>

<androidx.appcompat.widget.LinearLayoutCompat 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="pause" />

    <Button
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="resume" />

    <ImageView
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/aa" />

</androidx.appcompat.widget.LinearLayoutCompat>

布局非常简单,就是3个view( view1、view2、view3)。其中 view3 是一个ImageView 。看看预览效果
在这里插入图片描述
编写代码:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var view1: View = findViewById(R.id.view1)
        var view2: View = findViewById(R.id.view2)
        var view3: View = findViewById(R.id.view3)

        view1.visibility = View.GONE
        view2.visibility = View.GONE
        view3.visibility = View.GONE

        val animator = slide(view1)
        //延迟执行:防止执行太快,视觉看不清
        animator.startDelay = 200
        animator.doOnStart {
            view1.visibility = View.VISIBLE
        }

        val animator2 = slide(view2)
        //延迟执行:制造和view1视差效果
        animator2.startDelay = 500
        animator2.doOnStart {
            view2.visibility = View.VISIBLE
        }

        val animator3 = slide(view3)
         //延迟执行:制造和view2视差效果
        animator3.startDelay = 800
        animator3.doOnStart {
            view3.visibility = View.VISIBLE
        }

        animator.start()
        animator2.start()
        animator3.start()
    }

    //从屏幕右侧滑入屏幕
    private fun slide(view: View): Animator {
        //获取屏幕宽度
        val display = windowManager.defaultDisplay
        val width = display.width
        val animator = ObjectAnimator.ofFloat(view, "translationX", width.toFloat(), 0f)
        animator.interpolator = DecelerateInterpolator()
        animator.duration = 450
        return animator
    }
}

代码非常简单,我就不一一解释了,相信你能看明白

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
根据提供的引用内容,我无法找到关于"vue-awesome-swiper"视差效果的具体信息。但是,我可以为您提供一些关于Vue.js和swiper的基本信息。 Vue.js是一个流行的JavaScript框架,用于构建用户界面。它具有简单易学、灵活和高效的特点,使得开发者可以更轻松地构建交互式的Web应用程序。 Swiper是一个现代化的移动端滑块插件,它提供了丰富的滑动效果和交互功能。它可以用于创建漂亮的轮播图、画廊、滑动菜单等。 要实现视差效果,您可以使用Vue.js和Swiper的组合。具体步骤如下: 1. 首先,确保您已经安装了Vue.js和Swiper。您可以通过以下命令来安装它们: ```shell npm install vue swiper ``` 2. 在您的Vue.js项目中,导入Vue和Swiper的相关模块: ```javascript import Vue from 'vue'; import Swiper from 'swiper'; import 'swiper/css/swiper.css'; ``` 3. 在Vue组件中,使用Swiper的相关API来创建一个滑块实例,并配置视差效果: ```javascript export default { mounted() { new Swiper('.swiper-container', { parallax: true, // 启用视差效果 // 其他配置项... }); } } ``` 4. 在模板中,使用适当的HTML结构来创建一个包含滑块内容的容器: ```html <template> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 滑块内容 --> <div class="swiper-slide"> <!-- 内容1 --> </div> <div class="swiper-slide"> <!-- 内容2 --> </div> <!-- 更多滑块内容... --> </div> </div> </template> ``` 请注意,以上只是一个基本的示例,您可以根据自己的需求进行进一步的配置和定制。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值