下拉展开动画效果

js实现下拉菜单动画效果 阅读详情

实现的效果

当点击一个View的时候,显示下面隐藏的一个View。要实现这个效果,只需要在点击的时候将View的Visition属性由gone设置为visible即可,但这个过程是瞬间完成的,怎么让View在显示时增加一个动画效果呢?需要实现这个效果,需要让隐藏的View的高度不断发生变化,但是不是迅速增大到目标值。所以用ValueAnimator来模拟这个过程。
首先,写一个简单的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_blue_dark"
      android:gravity="center_vertical"
      android:onClick="llClick"
      android:orientation="horizontal">

      <ImageView
          android:id="@+id/iv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@mipmap/ic_launcher"/>

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginLeft="5dp"
          android:gravity="left"
          android:text="click me"
          android:textSize="30dp"/>

  </LinearLayout>

  <LinearLayout
      android:id="@+id/ll_hidden_view"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:background="@android:color/holo_orange_light"
      android:gravity="center_vertical"
      android:orientation="horizontal"
      android:visibility="gone">

      <ImageView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:src="@mipmap/ic_launcher"/>

      <TextView
          android:id="@+id/tv_hidden"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:gravity="center"
          android:text=" i am hidden"
          android:textSize="20dp"/>

  </LinearLayout>

</LinearLayout>
最后,使用ValueAnimator来创建一个从0到目标值的数值变化器,并由此来改变View的布局属性
实例代码如下

package com.zjzs.gisq.app;

import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.Toast;

/**
* Created by susr on 2016/11/9 14:11.
*/
public class CloneActivity extends AppCompatActivity {

private LinearLayout mHiddenView;
private Float        mDensity;
private int          mHiddenViewHeight;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_clone);

    mHiddenView = (LinearLayout) findViewById(R.id.ll_hidden_view);

    // 获取像素的密度
    // density :密度
    mDensity = getResources().getDisplayMetrics().density;
    // 获取布局的高度
    mHiddenViewHeight = (int) (mDensity * 30 + 0.5F);
}

public void llClick(View view) {
    if (mHiddenView.getVisibility() == View.GONE) {

        Toast.makeText(this, "打开动画了", Toast.LENGTH_SHORT).show();
        animateOpen(mHiddenView);
        // mHiddenView.setVisibility(View.VISIBLE);
    } else {

        Toast.makeText(this, "关闭动画了", Toast.LENGTH_SHORT).show();
        animateClose(mHiddenView);
    }


}

private void animateClose(final View view) {
    int height = view.getHeight();
    ValueAnimator animator = createDropAnimator(view, height, 0);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            view.setVisibility(View.GONE);
        }
    });
    animator.start();
}

private void animateOpen(View view) {
    mHiddenView.setVisibility(View.VISIBLE);
    ValueAnimator animator = createDropAnimator(view, 0, mHiddenViewHeight);
    animator.start();
}

private ValueAnimator createDropAnimator(final View view, int start, int end) {
    ValueAnimator animator = ValueAnimator.ofInt(start, end);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            // PropertyValuesHolder[] values = animation.getValues();
            int value = (Integer) animation.getAnimatedValue();
            ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
            layoutParams.height = value;
            view.setLayoutParams(layoutParams);
        }
    });

    return animator;
}

}

android下拉特效,类似微信下拉,下拉滑动动画效果。 现下很流行的下拉特效,类似于微信下拉原理,绝对不吭!很好的下拉效果特效。 立即下载

相关推荐

安卓灵动菜单,计时器动画,下拉展开动画demo展示

安卓灵动菜单,计时器动画,下拉展开动画demo展示.........

html 下拉动画,CSS3模拟动画下拉菜单效果

下拉菜单模拟效果图:CSS3:#box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}#box:hover{height:250px;}#box ul{list-style:none; margin:0; padding:0;}#box ul li{width:198px; he...

weixin_42511832的博客 600

js实现类似动画效果的下拉菜单

js实现类似动画效果的下拉菜单 js实现类似动画效果的下拉菜单 js实现类似动画效果的下拉菜单 js实现类似动画效果的下拉菜单

css transition下拉动画效果实现

解决问题: 这个功能一般都在官网头部导航栏上看到的效果,鼠标放上去就下拉,鼠标离开就收缩。 唯一难点就是下拉的高度随内容变化,而不是固定的,下面就是解决方法。 代码如下: <template> <div class="test"> <div class="nav"> <div class="mian_nav"> <div class="logoIcon"> <img src

weixin_44694389的博客 2539

Android属性动画实现布局的下拉展开效果

主要为大家详细介绍了Android属性动画实现布局的下拉展开效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

S32K1XX调试--快速定位HardFault

1、背景 程序运行,发现程序跑飞到HardFault,但不清楚为什么会跑到HardFault中断处理函数去。 2、分析 要想知道为什么会跑到HardFault_Handler中去,就很有必要了解一下,程序上一条执行的是那条命令。 根据汇编指令可以定位上条指令,但如果对汇编指令不是很了解的话,那就很头疼了 根据单步运行也能实现定位,但如果程序量很大,又很杂,可能花费的时间就比较久些。 3、问题查找 提供一种不需要懂汇编指令的查找方法,方法如下: 在中断处理函数中插入以下代码,以及另外定义

ping_devil的博客 4019

css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

转载地址:https://my.oschina.net/u/4369742/blog/3484647 HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hidden: shouldSubListShow === false, })} > {

weixin_42776027的博客 7937

CODESYS安装全攻略:从下载到配置的保姆级教程(含常见问题解决)

本文提供了一份详细的CODESYS安装与配置指南,涵盖从系统环境准备、安装包下载、Development System安装到Runtime System配置的全过程。教程重点解决了安装过程中的常见权限、兼容性和连接问题,并指导用户完成第一个PLC程序的创建与调试,帮助工业自动化开发者快速上手这一通用开发平台。

kkk56的博客 420

jQuery中几种常见的动画效果

(用于对jQuery的笔记学习与复习)

欢迎来到长风沛雨的博客 2402

C#实战:如何从零构建一个轻量级软PLC梯形图编辑器(附完整源码)

本文详细介绍了如何使用C#从零开始构建一个轻量级软PLC梯形图编辑器。内容涵盖项目架构设计、GDI+图形渲染、编辑交互实现以及核心的扫描执行引擎开发,并提供了定时器、计数器等高级功能的实现思路与完整源码,为开发者深入工业自动化领域提供了实战指南。

4k5l6j7h8的博客 257

ZLMediaKit在Windows下启用WebRtc编译(64位)

准备软件 cmake-gui vs2017 已经编译好的windows版本openssl(下载地址) 当然,你完全可以自己按照openssl的官网教程自己编译windows版本的openssl libsrtp编译安装 首先,需要将下载好的openssl解压并添加到环境变量。如下图,将下图路径添加到环境变量 其次,下载libsrtp(下载地址) 下载后解压并新建build文件夹,如下图: 在合适位置新建文件夹放置install后的srtp文件,如"D:\develop20..

byna11sina11的博客 1万+

css 和 js 实现高度的动画效果,常用于下拉菜单,下拉选项要做动画处理

css 和 js 实现高度的动画效果,常用于下拉菜单,下拉选项要做动画处理,实现方式

呆呆狗 2853

ADS仿真功率放大器实例学习笔记

ADS仿真功率放大器实例学习笔记

qq_36521926的博客 1万+

android PopupWindow 添加下拉展开动画效果

android PopupWindow 添加下拉展开动画效果

楠之枫雪的博客 7358

在 CentOS7 下安装 Cadence IC验证平台 INCISIVE152

前言 本文所使用的软件 虚拟机软件:VMware Workstation 15 PRO 如何安装? 操作系统:CentOS-7, CentOS-7-x86_64-DVD-1810.iso 如何安装? 简介 INCISIVE Incisive是nc_verilog, nc_sim, nc_lauch,以及ABV,TBV的集合,用于仿真和验证。 InstallScape InstallSc...

沈醉不知的博客 2万+

Unity插件——WebView内嵌网页/浏览器插件

一、相关插件: 1、Embedded Browser 插件(文件夹名ZFBrowserUnity) 2、UniWebView插件 3、UnityAndroidWebviewToTexture插件 4、3D WebView for Android插件 二、遇到的问题: 3D WebView显示问题 项目中使用3D WebView存在的问题 三、插件使用 Embedded Browser 加载页面的使用

青岚岁叶的博客 1万+

Android自动伸展动画,Android属性动画实现布局的下拉展开效果

在Android的3.0之后,google又提出了属性动画的这样一个框架,他可以更好的帮助我们实现更丰富的动画效果。所以为了跟上技术的步伐,今天就聊一聊属性动画。这一次的需求是这样的:当点击一个View的时候,显示下面隐藏的一个View,要实现这个功能,需要将V iew的visibility属性设置gone为visible即可,但是这个过程是一瞬间的,并不能实现我们要的效果。所以,属性动画是个不错...

weixin_39821330的博客 524

Labelme安装教程(附Anaconda安装教程)

本文详细介绍了如何安装Anaconda和Labelme,还提供了常见问题的解决建议。

HanYan_ing的博客 1万+

用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果

仿有赞首页搜索框点击放大input并展开下拉盒子的效果用elemnet ui实现

m0_57454052的博客 1842

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

【秀米教程7】SVG点击展开推文,手机横屏下拉效果动画

效果展示 效果展示:点击图片展开推文内容 效果图 操作步骤 点击【图文模板】 - 【SVG】 - 在左边选择自己想要的下拉效果 点击下拉效果图的边框 - 点击【编辑】显示内容:显示当前编辑下的内容,但不能编辑 点击【转场设置】 ①解释说明:【转场设置】下方有“转场淡出(0.5秒)+展开(13秒)”提示 ②转场淡出(0.5秒):封面淡出的时长 ③展开(13秒):内容展开的总时长 ...

MrFlySand的博客 5422

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

下拉展开动画

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="vie...

weixin_43816501的博客 130

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

带动画效果、平滑展开的jQuery大幅下拉菜单代码

点击查看:网页特效    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>多级的动画菜单代码</title...

weixin_30551963的博客 69

android列表点击展开,Android开源控件InboxRecyclerView,支持点击展开(Click-to-expand),下拉折叠(Pull-to-dismiss)的导航效果...

前言正文简介InboxRecyclerView是一款基于RecyclerView的开源控件,支持点击时展开以及下拉折叠的动画切换效果。 java 若是你有兴趣了解InboxRecyclerView的工做原理感兴趣,下文将对项目的一些细节进行描述。androidClick to ExpandInboxRecyclerView包含主要两部分:列表项的InboxRecyclerView以及用于显示可扩展...

weixin_39589693的博客 444
上一篇: Android设置透明、半透明等效果
下一篇: SurfaceView使用详解
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值