使用ObjectAnimator开发打开、关闭书本动画

本文介绍如何利用Android的ObjectAnimator类创建书本打开和关闭的动画效果。内容涉及ObjectAnimator的工作原理,动画的实现思路,以及在代码中如何处理动画的各个细节,如背景、封面和加载图标的位移、缩放和旋转。同时,文章指出在实现过程中遇到的问题,如动画轴点的选择、视图居中和平移调整等,并提供了主要代码示例。
摘要由CSDN通过智能技术生成

动画效果

动画效果-分享链接
(想做成gif图的,尝试各种工具无果)

ObjectAnimator简介及实现思路

 ObjectAnimator是从api level 11 (Android3.0x)增加的类。在11已下版本使用,你可以在工程中引入nineoldandroids包。
  这里直接翻译android文档的内容。
 This subclass of ValueAnimator provides support for animating properties on target objects. The constructors of this class take parameters to define the target object that will be animated as well as the name of the property that will be animated. Appropriate set/get functions are then determined internally and the animation will call these functions as necessary to animate the property.
 它是ValueAnimator的子类,提供对目标对象属性动画的支持。它的构造方法的参数包括要进行动画的目标对象以及进行动画的属性名。相应的set/get方法将在内部确定,必要时将调用它们进行动画。
实现思路

  比如打开第一张图粉红色位置的书,第二张图是中间过程。
  动画分为三部分,褐色部分为背景(可以为背景设置不同的纯色),黄色部分为封面,灰色部分为加载图标
  这三部分分别要新建一个ImageView,加入到FrameLayout中,使用WindowManager显示在屏幕上。

  • 背景动画:从A移动到B(translationX, translationY属性),同时放大(scaleX,scaleY属性);
  • 封面动画:从A移动到B,同时放大,旋转(rotationY);
  • 加载图标:在屏幕居中,从0放大到1;

关闭动画属性值与打开动画真好相反。

遇到的问题:

  1. 动画轴点(pivotX, pivotY)使用默认的(0, 0)即可;
  2. y方向放大比例大时,x方向需要做平移,使view居中;
  3. 背景控件的布局参数不能为wrap_content, 否则,因其使用ColorDrawable作为背景,它将不可见;也不能是match_parent, 否则,它将填充屏幕。所以要为它指定宽、高。

主要代码

BookView.java

package com.example.openbookanimationproj;

import java.util.concurrent.atomic.AtomicBoolean;
import java.util.concurrent.atomic.AtomicInteger;

import com.example.openbookanimationproj.R;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.Animator.AnimatorListener;
import com.nineoldandroids.animation.ObjectAnimator;
import com.nineoldandroids.view.ViewHelper;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.ListView;
import android.widget.RelativeLayout;

/**
 * A view to show the cover of a book. With method
 * {@link BookView#startOpenBookAnimation(OpenBookAnimEndListener, ViewParent)} and method
 * {@link BookView#startCloseBookAnimation()} to play opening and closing book animations.
 * 
 * @author wenping0820@163.com
 * @date 2015-07-13
 */
public class BookView extends RelativeLayout implements AnimatorListener {
   
    public static BookView sOpenedBookView;
    // Opening book animation duration
    private static final int OPEN_ANIMATION_DURATION = 500;
    // Closing book animation duration
    public static final int CLOSE_ANIMATION_DURATION = 500;
    // Animation background scales
    private float mB
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3中的书本仿真翻页动画通常通过结合Vue.js的响应式特性、CSS样式和JavaScript处理来实现。以下是一个简单的步骤描述: 1. **HTML结构**: 创建一个虚拟的书籍模型,比如包含多个`<div>`元素,每个代表一页,可以设置一个统一的容器用于显示当前页和下一页。 ```html <div class="book"> <div v-for="page in pages" :key="page.id" :class="{ current: page.isCurrent }">{{ page.content }}</div> </div> ``` 2. **Vue组件**: 定义一个Vue组件,绑定数据`pages`表示书的内容,并管理当前页状态。可以创建一个`data()`函数初始化这些变量。 ```javascript export default { data() { return { pages: [ { id: 1, content: '第一页', isCurrent: true }, { id: 2, content: '第二页' }, // 更多页面... ], currentPage: 1, }; }, }; ``` 3. **CSS样式**: 编写一些CSS规则来模拟翻页效果,比如改变`.current`类的选择器中的内容位置,添加过渡动画。 ```css .book { position: relative; overflow: hidden; } .page { position: absolute; transition: transform 0.5s ease-in-out; } .current { top: 0; } .next-page { transform: translateY(100%); } ``` 4. **JavaScript处理**: 使用Vue的`v-if`和`v-else-if`指令处理翻页逻辑。当用户交互(如点击按钮或触屏滑动)时,更新`currentPage`并应用相应的CSS变换。 ```javascript methods: { turnPage(direction) { this.currentPage += direction; if (this.currentPage > this.pages.length - 1) { this.currentPage = 1; } else if (this.currentPage < 1) { this.currentPage = this.pages.length; } const next = this.pages[this.currentPage]; next.isCurrent ? this.$refs.book.scrollTop = 0 : this.$refs.book.style.transform = 'translateY(-100%)'; }, }, ``` 将`turnPage`方法绑定到合适的事件上,比如按钮点击或触摸滑动。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值