欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现绕球心旋转的引导页效果

程序员文章站 2024-03-01 21:16:46
现在很多app都会出现android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果。 先看一下预览效果: 嗯,整体效果还算理想,基本实现了...

现在很多app都会出现android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果。

先看一下预览效果:
Android实现绕球心旋转的引导页效果

嗯,整体效果还算理想,基本实现了页面绕屏幕底部中心旋转。

这里我们用到了android系统的一个组件viewflipper,该控件的主要作用是为其中的view切换提供动画效果,主要的方法如下:

  • setinanimation:设置view进入屏幕时的动画。
  • setoutanimation:设置view退出屏幕时的动画。
  • shownext:调用该方法可以显示下一个view。
  • showprevious:调用该方法可以来显示上一个view。
  • setfilpinterval:设置view切换的时间间隔。参数为毫秒。
  • startflipping:开始进行view的切换。
  • stopflipping:停止view切换。
  • setautostart:设置是否自动开始。如果设置为“true”,当viewflipper显示的时候view的切换会自动开始。

首先看一下布局代码:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#440000ff">

  <imageview
    android:layout_width="match_parent"
    android:layout_height="230dp"
    android:layout_alignparentbottom="true"
    android:background="@mipmap/guide_bg" />

  <relativelayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <viewflipper
      android:id="@+id/vf"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <fragment
        class="com.example.dell.guide.guideonefragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

      <fragment
        class="com.example.dell.guide.guidetwofragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

      <fragment
        class="com.example.dell.guide.guidethreefragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    </viewflipper>
  </relativelayout>
</relativelayout>

主要就是一张在页面底部的白色半球图片,以及viewflipper内部的三个view,当然可以不用fragment,使用一般的layout也行。

接下来就是对应的activity:

public class mainactivity extends appcompatactivity {
  //处理手势监听
  private gesturedetector detector;

  private viewflipper flipper;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    flipper = (viewflipper) findviewbyid(r.id.vf);

    detector = new gesturedetector(this, new gesturedetector.simpleongesturelistener() {
      @override
      public boolean onfling(motionevent e1, motionevent e2, float velocityx, float velocityy) {
        if (e1.getx() - e2.getx() > 120.0f) { //从右向左滑动
          flipper.setinanimation(mainactivity.this, r.anim.tip_left_in);
          flipper.setoutanimation(mainactivity.this, r.anim.tip_left_out);
          if (flipper.getdisplayedchild() < 2) {
            flipper.shownext();
          }
        } else if (e1.getx() - e2.getx() < -120.0f) { //从左向右滑动
          flipper.setinanimation(mainactivity.this, r.anim.tip_right_in);
          flipper.setoutanimation(mainactivity.this, r.anim.tip_right_out);
          if (flipper.getdisplayedchild() > 0) {
            flipper.showprevious();
          }
        }
        return false;
      }
    });
  }

  @override
  public boolean ontouchevent(motionevent event) {
    if (detector != null) {
      return detector.ontouchevent(event);
    }
    return super.ontouchevent(event);
  }
}

因为要实现手势滑动来切换页面,所以要创建一个gesturedetector对象:

detector = new gesturedetector(this, new gesturedetector.simpleongesturelistener() {
      @override
      public boolean onfling(motionevent e1, motionevent e2, float velocityx, float velocityy) {
        //省略......
        return false;
      }
    });

由于我们只关心,手指的左右滑动,所以重写simpleongesturelistener的onfling()即可,然后在ontouchevent()进行手势监听的绑定。到此我们的activity就可以相应滑动的手势了。

在onfling()方法中,当从右向左滑动时,通过setinanimation()、setoutanimation()设置flipper中view从右侧进入的动画和从左侧退出的动画,然后调用shownext()方法开始切换到下一页,这样就可以看到对应的动画效果。从左向右滑动时情况类似,同样需要设置view进入和退出的动画,然后通过showprevious()方法切换到上一页。

具体的动画文件可以参考源代码,这里就不贴了。源码下载

到此整个实现流程就介绍完了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。