- 浏览: 5819215 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
基本的类,只有一个:
import android.animation.Animator; import android.animation.ValueAnimator; import android.view.MotionEvent; import android.view.View; import android.view.ViewTreeObserver; import android.view.animation.DecelerateInterpolator; public class SlideUp implements View.OnTouchListener, ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener { private View view; private float touchableTop; private int autoSlideDuration = 300; private SlideListener slideListener; private ValueAnimator valueAnimator; private float slideAnimationTo; private float startPositionY; private float viewStartPositionY; private boolean canSlide = true; private float density; private float lowerPosition; private float viewHeight; private boolean hiddenInit; public SlideUp(final View view) { this.view = view; this.density = view.getResources().getDisplayMetrics().density; this.touchableTop = 300 * density; view.setOnTouchListener(this); view.setPivotY(0); createAnimation(); view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (hiddenInit) { viewHeight = view.getHeight(); hideImmediately(); } view.getViewTreeObserver().removeGlobalOnLayoutListener(this); } }); } public boolean isVisible(){ return view.getVisibility() == View.VISIBLE; } public void setSlideListener(SlideListener slideListener) { this.slideListener = slideListener; } public void setAutoSlideDuration(int autoSlideDuration) { this.autoSlideDuration = autoSlideDuration; } public float getAutoSlideDuration(){ return this.autoSlideDuration; } public void setTouchableTop(float touchableTop) { this.touchableTop = touchableTop * density; } public float getTouchableTop() { return this.touchableTop/density; } public boolean isAnimationRunning(){ return valueAnimator != null && valueAnimator.isRunning(); } public void animateIn(){ this.slideAnimationTo = 0; valueAnimator.setFloatValues(viewHeight, slideAnimationTo); valueAnimator.start(); } public void animateOut(){ this.slideAnimationTo = view.getHeight(); valueAnimator.setFloatValues(view.getTranslationY(), slideAnimationTo); valueAnimator.start(); } public void hideImmediately() { if (view.getHeight() > 0) { view.setTranslationY(viewHeight); view.setVisibility(View.GONE); notifyVisibilityChanged(View.GONE); } else { hiddenInit = true; } } private void createAnimation(){ valueAnimator = ValueAnimator.ofFloat(); valueAnimator.setDuration(autoSlideDuration); valueAnimator.setInterpolator(new DecelerateInterpolator()); valueAnimator.addUpdateListener(this); valueAnimator.addListener(this); } @Override public boolean onTouch(View v, MotionEvent event) { float touchedArea = event.getRawY() - view.getTop(); if (isAnimationRunning()) { return false; } switch (event.getActionMasked()) { case MotionEvent.ACTION_DOWN: this.viewHeight = view.getHeight(); startPositionY = event.getRawY(); viewStartPositionY = view.getTranslationY(); if (touchableTop < touchedArea) { canSlide = false; } break; case MotionEvent.ACTION_MOVE: float difference = event.getRawY() - startPositionY; float moveTo = viewStartPositionY + difference; float percents = moveTo * 100 / view.getHeight(); if (moveTo > 0 && canSlide){ notifyPercentChanged(percents); view.setTranslationY(moveTo); } if (event.getRawY() > lowerPosition) { lowerPosition = event.getRawY(); } break; case MotionEvent.ACTION_UP: float slideAnimationFrom = view.getTranslationY(); boolean mustSlideUp = lowerPosition > event.getRawY(); boolean scrollableAreaConsumed = view.getTranslationY() > view.getHeight() / 5; if (scrollableAreaConsumed && !mustSlideUp) { slideAnimationTo = view.getHeight(); } else { slideAnimationTo = 0; } valueAnimator.setFloatValues(slideAnimationFrom, slideAnimationTo); valueAnimator.start(); canSlide = true; lowerPosition = 0; break; } return true; } @Override public void onAnimationUpdate(ValueAnimator animation) { float val = (float) animation.getAnimatedValue(); view.setTranslationY(val); float percents = (view.getY() - view.getTop()) * 100 / viewHeight; notifyPercentChanged(percents); } private void notifyPercentChanged(float percent){ if (slideListener != null) { slideListener.onSlide(percent); } } private void notifyVisibilityChanged(int visibility){ if (slideListener != null) { slideListener.onVisibilityChanged(visibility); } } @Override public void onAnimationStart(Animator animator) { view.setVisibility(View.VISIBLE); notifyVisibilityChanged(View.VISIBLE); } @Override public void onAnimationEnd(Animator animator) { if (slideAnimationTo > 0) { view.setVisibility(View.GONE); notifyVisibilityChanged(View.GONE); } } @Override public void onAnimationCancel(Animator animator) { } @Override public void onAnimationRepeat(Animator animator) { } public interface SlideListener { void onSlide(float percent); void onVisibilityChanged(int visibility); } }
基本用法:
创建一个任意类型的布局
<LinearLayout
android:id="@+id/slideView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
获取这个view,SlideUp对象并传入view
View slideView = findViewById(R.id.slideView);
SlideUp slideUp = new SlideUp(slideView);
更复杂的例子:
import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; import com.mancj.slideup.SlideUp; public class SlideUpViewActivity extends AppCompatActivity { private SlideUp slideUp; private View dim; private View slideView; private FloatingActionButton fab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_slide_up_view); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); slideView = findViewById(R.id.slideView); dim = findViewById(R.id.dim); fab = (FloatingActionButton) findViewById(R.id.fab); slideUp = new SlideUp(slideView); slideUp.hideImmediately(); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { slideUp.animateIn(); fab.hide(); } }); slideUp.setSlideListener(new SlideUp.SlideListener() { @Override public void onSlide(float percent) { dim.setAlpha(1 - (percent / 100)); } @Override public void onVisibilityChanged(int visibility) { if (visibility == View.GONE) { fab.show(); } } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_slide_up_view, menu); return true; } }
布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:fitsSystemWindows="true" android:layout_height="match_parent" android:background="@color/colorPrimary"> <FrameLayout android:alpha="0" android:id="@+id/dim" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/dimBg" /> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.slideup.SlideUpViewActivity"> <android.support.design.widget.AppBarLayout android:background="@android:color/transparent" android:layout_width="match_parent" android:layout_height="wrap_content" android:elevation="0dp" app:elevation="0dp" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_slide_up_view" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" app:srcCompat="@drawable/ic_call_black_24dp" app:fabSize="normal" /> </android.support.design.widget.CoordinatorLayout> </RelativeLayout>
发表评论
-
NestedScrollView滚动到顶部固定子View悬停挂靠粘在顶端
2018-10-31 20:45 6993网上有一个StickyScrollView,称之为粘性Scro ... -
自定义Behavior实现AppBarLayout越界弹性效果
2017-03-31 09:33 10366一、继承AppBarLayout.Beha ... -
Android - 一种相似图片搜索算法的实现
2017-03-31 09:33 2622算法 缩小尺寸。 将图片缩小到8x8的尺寸,总共64个 ... -
使用SpringAnimation实现带下拉弹簧动画的 ScrollView
2017-03-30 11:30 2847在刚推出的 Support Library 25.3.0 里面 ... -
Android为应用添加角标(Badge)
2017-03-30 11:21 61751.需求简介 角标是什么意思呢? 看下图即可明了: 可 ... -
Android端与笔记本利用局域网进行FTP通信
2017-03-23 10:17 978先看图 打开前: 打开后: Activity类 ... -
PorterDuffColorFilter 在项目中的基本使用
2017-03-03 10:58 1354有时候标题栏会浮在内容之上,而内容会有颜色的变化,这时候就要求 ... -
ColorAnimationView 实现了滑动Viewpager 时背景色动态变化的过渡效果
2017-02-24 09:41 2220用法在注释中: import android.anima ... -
迷你轻量级全方向完美滑动处理侧滑控件SlideLayout
2017-01-16 16:53 2594纯手工超级迷你轻量级全方向完美滑动处理侧滑控件(比官方 sup ... -
Effect
2017-01-05 09:57 0https://github.com/JetradarMobi ... -
动态主题库Colorful,容易地改变App的配色方案
2016-12-27 14:49 2565Colorful是一个动态主题库,允许您很容易地改变App的配 ... -
对视图的对角线切割DiagonalView
2016-12-27 14:23 1118提供对视图的对角线切割,具有很好的用户定制 基本用法 ... -
仿淘宝京东拖拽商品详情页上下滚动黏滞效果
2016-12-26 16:53 3494比较常用的效果,有现成的,如此甚好!:) import ... -
AdvancedWebView
2016-12-21 09:44 16https://github.com/delight-im/A ... -
可设置圆角背景边框的按钮, 通过调节色彩明度自动计算按下(pressed)状态颜色
2016-11-02 22:13 1920可设置圆角背景边框的的按钮, 通过调节色彩明度自动计算按下(p ... -
网络请求库相关
2016-10-09 09:35 62https://github.com/amitshekhari ... -
ASimpleCache一个简单的缓存框架
2015-10-26 22:53 2177ASimpleCache 是一个为android制定的 轻量级 ... -
使用ViewDragHelper实现的DragLayout开门效果
2015-10-23 10:55 3414先看一下图,有个直观的了解,向下拖动handle就“开门了”: ... -
保证图片长宽比的同时拉伸图片ImageView
2015-10-16 15:40 3732按比例放大图片,不拉伸失真 import android. ... -
向上拖动时,可以惯性滑动显示到下一页的控件DragLayout
2015-10-16 14:53 5581仿照淘宝和聚美优品,在商品详情页,向上拖动时,可以加载下一页。 ...
相关推荐
通过掌握上述知识点,你可以创建出具有滑动效果的导航菜单,并在用户鼠标移动时触发滑动效果,同时确保在不同浏览器上的兼容性。对于前端开发者来说,熟悉jQuery和CSS动画是提升网站交互性和用户体验的关键技能。在...
1. 确保元素具有明确的高度:滑动效果依赖于元素的高度,因此隐藏的元素必须有非零高度才能正确滑动。 2. 避免与 CSS3 动画冲突:如果同时使用 jQuery 动画和 CSS3 动画,可能产生不预期的效果,确保两者之间的协调...
在压缩包文件"jq导航菜单效果menueffect"中,可能包含了实现这种效果的HTML文件、CSS文件和JavaScript文件,通过查看和学习这些文件,你可以深入理解如何将ASP、jQuery和CSS3结合起来,创建出具有滑动效果的网页导航...
在微信小程序中实现slideUp和slideDown滑动效果就可以利用transform属性的translateY()方法。 transform:translateY()方法的作用是移动元素的垂直位置,它的参数可以是百分比或者是像素。例如,translateY(100%)会...
实现选项卡滑动效果可以让交互更加生动有趣,提升用户体验。本篇文章将详细探讨如何实现这一功能,主要关注JavaScript和CSS的运用。 首先,我们需要创建HTML结构。一个基本的选项卡组件通常包括一个包含所有选项的...
总的来说,jQuery的列表滑动效果是一种常见的网页动态效果,通过结合`slideUp()`, `slideDown()`和`slideToggle()`方法,以及适当的DOM操作,可以轻松实现。在实际开发中,我们还需要考虑用户体验、性能优化和兼容性...
标题 "jquery ui 的一个菜单滑动效果" 涉及的是使用 jQuery UI 库来创建具有滑动动画的交互式菜单。jQuery UI 是基于 jQuery JavaScript 库的一个扩展,提供了丰富的用户界面组件,如对话框、进度条、日期选择器、...
标题“jQuery QQ相册滑动效果”涉及...总的来说,这个项目是一个使用jQuery实现的,具有弹出层展示和滑动切换效果的QQ相册模拟。开发者通过巧妙运用jQuery的动画功能和弹出层设计,为用户提供了类似QQ相册的浏览体验。
标题中的“国外很流行的jquery滑动效果”指的是利用jQuery库实现的一种动态视觉效果,它通常涉及到页面元素(如图片、文字或整个div)的平滑移动,为网站增添交互性和吸引力。这种效果在网页设计中广泛应用,能创造...
2. **动画方法**:jQuery提供了一系列的动画方法,如`.slideToggle()`, `.slideUp()`, `.slideDown()`等,用于实现滑动效果。这些方法不仅简单易用,还可以接受时间参数来控制动画速度。 3. **自定义动画**:如果...
本项目"AJAX百度搜索自动提示效果+JQuery滑动效果"结合了这两者的优势,为用户提供了类似百度搜索那样的实时自动提示功能,并辅以jQuery的平滑滑动效果,让网页界面更加生动且易用。 首先,我们来详细探讨AJAX技术...
jQuery的`slideToggle()`, `slideUp()`, `slideDown()`等方法可以实现这些效果。这些方法能够以动画形式改变元素的高度或可见性,使得页面变化更为流畅和吸引人。例如,一个常见的应用场景是在导航菜单中,当用户...
Android-SlideUp-Android.zip,slideup是一个小型库,允许您向任何视图添加甜蜜的幻灯片效果。,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性...
JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,尤其在实现页面交互和动态效果方面具有强大能力。"js滑动效果"是JS的一个重要应用领域,它可以让网页元素如图片、文本或整个页面按照...
3. **动画效果**:在事件处理函数中,使用`.slideUp()`、`.slideDown()`、`.slideToggle()`等方法实现滑动效果。这些方法可以配合`duration`参数设置动画速度,`easing`参数调整动画缓动函数,以实现更加平滑的过渡...
滑动门效果是一种常见的网页设计技术,主要用于创建具有动态视觉效果的导航菜单或图像展示。在HTML、CSS和JavaScript的组合下,滑动门效果能够实现元素(如按钮或图片)在鼠标悬停时,其上下两部分独立响应,产生...
`slideUp()`用于让元素以滑动方式逐渐隐藏,`slideDown()`则相反,让元素滑动显示。根据需求,可能还结合了`animate()`方法来创建自定义动画效果,调整图片显示和隐藏的速度、延迟以及平滑过渡。 此外,可能还会...
本教程将重点讲解如何利用jQuery创建一个具有黄色背景图片和滑动效果的菜单导航。 首先,我们需要了解jQuery的基本用法。jQuery通过简洁的API简化了JavaScript的DOM操作、事件处理和动画效果。要开始使用jQuery,...