ViewPager 带动画的欢迎界面
一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换的时候添加切换动画效果
先看布局文件
activity_main.layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/frameLayout1"
android:orientation="vertical"> </FrameLayout>

然后是java文件
mainactivity.java

1 package com.example.viewpage;
2
3 import java.util.ArrayList;
4 import java.util.List;
5
6 import android.os.Bundle;
7 import android.app.Activity;
8 import android.graphics.DashPathEffect;
9 import android.support.v4.view.PagerAdapter;
10 import android.support.v4.view.ViewPager;
11 import android.text.style.SuperscriptSpan;
12 import android.view.Menu;
13 import android.view.View;
14 import android.view.ViewGroup;
15 import android.view.Window;
16 import android.widget.ArrayAdapter;
17 import android.widget.ImageView;
18 import android.widget.ImageView.ScaleType;
19
20 public class MainActivity extends Activity {
21
22 private ViewPager mviewpager; //控件
23 private int[] mImgIds = new int[]{R.drawable.guide_image1,R.drawable.guide_image2,R.drawable.guide_image3};//初始化图片
24 private List<ImageView> mImages = new ArrayList<ImageView>();
25
26
27
28 @Override
29 protected void onCreate(Bundle savedInstanceState) {
30 super.onCreate(savedInstanceState);
31 requestWindowFeature(Window.FEATURE_NO_TITLE);
32 setContentView(R.layout.activity_main);
33
34 mviewpager = (ViewPager) findViewById(R.id.id_viewpager);
35 //为ViewPage切换添加动画效果(3.0以上版本才可以有效果)
36 mviewpager.setPageTransformer(true, new ZoomOutPageTransformer());
37
38 mviewpager.setAdapter(new PagerAdapter() {
39
40 @Override
41 public Object instantiateItem(View container, int position) {
42 ImageView imageview = new ImageView(MainActivity.this);
43 imageview.setImageResource(mImgIds[position]);
44 imageview.setScaleType(ScaleType.CENTER_CROP); //设置图片不变形
45 ((ViewGroup) container).addView(imageview);
46 mImages.add(imageview);
47 return imageview;
48 };
49 @Override
50 public void destroyItem(View container, int position, Object object) {
51 // TODO Auto-generated method stub
52
53 ((ViewPager) container).removeView(mImages.get(position));
54 }
55 public boolean isViewFromObject(View view, Object object) {
56 // TODO Auto-generated method stub
57 return view == object;
58 }
59
60 @Override
61 public int getCount() { //返回图片个数
62 // TODO Auto-generated method stub
63 return mImgIds.length;
64 }
65 });
66 }
67
68
69
70 }

这里代码很简单,主要就是一行代码控制切换效果 第36行mviewpager.setPageTransformer(true, new ZoomOutPageTransformer());
第二个参数就是切换效果,当然不是随便的参数
这些参数可以在http://wear.techbrood.com/training/animation/screen-slide.html网上查阅到
代码是给定的,只要复制代码,点击包粘贴就生成了相应的java文件
这里展示下几种效果:
1、ZoomOutPageTransformer()

1 public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
2 private static final float MIN_SCALE = 0.85f;
3 private static final float MIN_ALPHA = 0.5f;
4
5 public void transformPage(View view, float position) {
6 int pageWidth = view.getWidth();
7 int pageHeight = view.getHeight();
8
9 if (position < -1) { // [-Infinity,-1)
10 // This page is way off-screen to the left.
11 view.setAlpha(0);
12
13 } else if (position <= 1) { // [-1,1]
14 // Modify the default slide transition to shrink the page as well
15 float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
16 float vertMargin = pageHeight * (1 - scaleFactor) / 2;
17 float horzMargin = pageWidth * (1 - scaleFactor) / 2;
18 if (position < 0) {
19 view.setTranslationX(horzMargin - vertMargin / 2);
20 } else {
21 view.setTranslationX(-horzMargin + vertMargin / 2);
22 }
23
24 // Scale the page down (between MIN_SCALE and 1)
25 view.setScaleX(scaleFactor);
26 view.setScaleY(scaleFactor);
27
28 // Fade the page relative to its size.
29 view.setAlpha(MIN_ALPHA +
30 (scaleFactor - MIN_SCALE) /
31 (1 - MIN_SCALE) * (1 - MIN_ALPHA));
32
33 } else { // (1,+Infinity]
34 // This page is way off-screen to the right.
35 view.setAlpha(0);
36 }
37 }
38 }

效果图:
红色的为第一张,蓝色的为第二张,向左滑动显示蓝色。效果为两张图并行缩小滑动
2、DepthPageTransformer()

1 public class DepthPageTransformer implements ViewPager.PageTransformer {
2 private static final float MIN_SCALE = 0.75f;
3
4 public void transformPage(View view, float position) {
5 int pageWidth = view.getWidth();
6
7 if (position < -1) { // [-Infinity,-1)
8 // This page is way off-screen to the left.
9 view.setAlpha(0);
10
11 } else if (position <= 0) { // [-1,0]
12 // Use the default slide transition when moving to the left page
13 view.setAlpha(1);
14 view.setTranslationX(0);
15 view.setScaleX(1);
16 view.setScaleY(1);
17
18 } else if (position <= 1) { // (0,1]
19 // Fade the page out.
20 view.setAlpha(1 - position);
21
22 // Counteract the default slide transition
23 view.setTranslationX(pageWidth * -position);
24
25 // Scale the page down (between MIN_SCALE and 1)
26 float scaleFactor = MIN_SCALE
27 + (1 - MIN_SCALE) * (1 - Math.abs(position));
28 view.setScaleX(scaleFactor);
29 view.setScaleY(scaleFactor);
30
31 } else { // (1,+Infinity]
32 // This page is way off-screen to the right.
33 view.setAlpha(0);
34 }
35 }
36 }

效果图:
红色的为第一张,蓝色的为第二张,向左滑动显示蓝色。效果为红色无变化向左滑动,蓝色由淡到深,由小到大占据屏幕
注意:添加DepthPageTransformer()和ZoomOutPageTransformer()java文件的时候 有两个错误 很容易 ctrl+1都能解决
更多动画类:
下载地址:
http://yunpan.cn/cFyjVgaeIFZ4e (提取码:ff5f)
ViewPager 带动画的欢迎界面的更多相关文章
- OC实现带弹跳动画按钮的界面控制器view
很多应用都有带弹跳动画发布界面,这里用一个 UIViewController 实现这种效果,外界只要 modal出不带动画这个控制器就可以实现 #import "BSPublishVC.h& ...
- jquery插件——点击交换元素位置(带动画效果)
一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...
- 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- 自定义带动画的Toast
一.style样式: 1. // 移动和透明渐变结合的动画 <style name="anim_view"> <item name="@ ...
- iOS带动画的环形进度条(进度条和数字同步)
本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- jQuery之锚点带动画跳转特效
背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
随机推荐
- Hessian与Webservice的区别
Hessian:hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能,相比WebService,Hessian更简单.快捷. 采用的是二进制RPC协议,因为 ...
- Delphi Webbrowser使用方法详解(一)
1.webbroser介绍 该组件是一个浏览器组件,可以显示一个指定地址的网页.设置网页打开时的主页以及对网页进行相关的操作,同时也可以对HTML文件进行剪切.复制.粘贴.删除等操作.该 组件在Int ...
- python2 与python3中最大的区别(编码问题bytes&str
1,在python2.x 中是不区分bytes和str类型的,在python3中bytes和str中是区分开的,str的所有操作bytes都支持 python2 中 >>> s = ...
- solr入门之权重排序方法初探之使用edismax改变权重
做搜索引擎避免不了排序问题,当排序没有要求时,solr有自己的排序打分机制及sorce字段 1.无特殊排序要求时,根据查询相关度来进行排序(solr自身规则) 2.当涉及到一个字段来进行相关度排序时, ...
- json 拖拽
1.梳理知识点 1.事件对象 e || event 2.事件对象的属性 鼠标事件对象 : 坐标属性 : clientX clientY pageX pageY offset ...
- 编码风格和PEP8规范
编码风格 错误认知 这很浪费时间 我是个艺术家 所有人都能穿的鞋不会合任何人的脚 我善长制定编码规范 正确认知 促进团队合作 减少bug处理 提高可读性,降低维护成本 有助于代码审查 养成习惯,有助于 ...
- saltstack安装配置及常用命令
1.salt安装及配置详解 https://www.cnblogs.com/lgeng/p/6567424.html centos7配置: https://www.jianshu.com/p/4c91 ...
- Redis hash数据结构
1, 新增一个 hash 或者 新增数据 => hset key field value 2, 获取某个字段值 => hset key field 3, 获取所有字段值 => hge ...
- 获取ASPxGridView 中的数据(仅仅是获取;注意模板是如何获取的)
1.取得控件值 using System.Collections.Generic; //取得当前控件值的集合 直接寻找控件的ID List<object> keyValues = this ...
- leetcode496
public class Solution { public int[] NextGreaterElement(int[] findNums, int[] nums) { var list = new ...