视差特效 * 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹* 功能实现: > 1. 重写overScrollBy > 2. 松手之后执行动画, 类型估值器 .  activity_main <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools&qu

效果就是下面这个样子: 思路借鉴的是MZTimerLabel,有想过做一个自定义的ImageView,但那样的话之前view用必须要改代码,索性就按照MZTimerLabel这个方式实现,简单易用,从简从俗 我的调用方式 1.CollectionViewCell初始化的时候调用ZZAnimateScaleImg初始化方法 var animateScaleImg: ZZAnimateScaleImg? override func awakeFromNib() { super.awakeFromNi

最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容ie7,只能说是无缘了 后来,利用jq的animate也能够实现,但是不知道怎么回事 当滚回去时有延迟,好几秒后才能隐藏不见. 最终使用tween能够完美实现,只能说原生js的强大了. tween其实是一个函数库,里面都是些公式,比如说运动轨迹的算数公式. 实现效果:其实就是一个小方块弹啊弹. 首先给

一.普通动画的设置 1.添加动画组件 a.添加空节点=>添加动画组件 b.新建Clip文件=>打开编辑模式添加动画编辑(并且把添加的clip文件拖动到右边面板的Default Clip 与相对应的Clips文件里) Default Clip => 在勾选Play On Load时或者调用play()默认播放的动画 Clips => 通过脚本访问可以播放的AnimationClip列表 Play On Loat => 是否在加载的时候播放 2.设置动画 WrapMode =&g

原理并不难.  代码量也不大.  非常简洁 .  先来个效果图 再上一波代码. public class SpecialScrollView extends ScrollView implements ViewTreeObserver.OnPreDrawListener { private static final String TAG = "SpecialScrollView"; private int mOriginalHeight; private int drawableHei

接上一节内容:cocos2dx - v2.3.3编辑器简单使用及不同分辨率适配 本节主要Cocos骨骼动画的创建及使用 一.新建 用Cocos Studio工具新建一个状态栏项目.如下图: 当然也可以新建一个空的Cocos项目,然后在 文件->新建文件 中选择骨骼动画来创建新的骨骼动画,如下图 因为这里只讲简单用法,着重使用,所有直接创建英雄示例动画. 二.添加动画 选择动画模式,并点击如下播放按钮,可以看到现在默认的动画. 示例中只有ALL动画,我们需要将每个动画按起始结束帧率分开,添加如下动

难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回弹效果是指当一个过渡达到最终值时,往回到一点,然后再次回到最终值,如此往复一次或者多次,并逐渐收敛,最终稳定在最终值.有相当的多JavaScript类库可以创建动画,且内置回弹效果等其他缓动效果.但是眼下,我们其实已经不需要借助脚本来实现过渡和动画了.不过,在CSS中实现回弹效果的最佳方式是什么呢?

写这个小Demo,也是因为刚好手里没什么事然后看到很多朋友还在好奇这个阻尼界面效果,还有自定义标签,其实这个标签因为现在Google已经有推出更好使用的东西可以替代,那就是“FlexboxLayout”,关于“FlexboxLayout”我之前的文章也介绍过.不清楚的可以回过去看下.关于titleBar的显示和隐藏,其实就是当我们在触摸滑动的时候,监听就可以了.这里贴出来,就是希望和大家共同学习,OK,先看效果吧. 布局文件activity_main: <?xml version="1.0

博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面. 相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案.在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助. 上拉下拉刷新的主要代码

以下就開始学习属性动画的基本使用方法,我们来看属性动画的继承关系,例如以下如所看到的: 显然关注的焦点应该是ValueAnimator,ObjectAnimator这两个类啦,ObjectAnimator继承自ValueAnimator.是属性动画中非常重要的一个实现类,通过ObjectAnimator类的静态欧工厂方法来创建ObjectAnimator对象,这些静态工厂方法包含:ObjectAnimator.ofFloat(),ObjectAnimator.ofInt()等等,当然最为重要的一

今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更加优质的用户体验,为了达到目标,我们需要让动画满足两点目标: 意料之外 情理之中 其中,意料之外是指动画要让用户感到新奇有趣,最好是产生惊喜(这归功于好的设计灵感),而情理之中是指动画要符合用户的直觉,具体来说,就是动画需要符合用户对物理世界物体运动规律的心智模型,这需要Web开发者来实现. 如何做到呢?终于

随着互联网的发展,动画效果也在一直更新,从刚开始的flsh动画,cocos骨骼动画,到YY开源的svga动画.最近1年来,带有透明通道的mp4动画被使用的极为广泛,对于app端.github上有开源的AlphaPlayer可以使用,但是对于web端,相关的资料很少.为了解决这个问题想了很多办法,提出了使用webm格式.但是最终还是要实现播放mp4格式. 播放mp4格式的透明动画,需要什么呢.首先,对于web前端来说,webgl应该大家都很少介绍到,更不要说着色器了(shader)和OpenGL

之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: https://github.com/saitjr/LoopProgressDemo.git 正文 一.视图层级 首先需要搞定的就是视图层级关系.可以看到, 1. 背景是有透明度的蓝色(blueView) 2. 需要一个从绿->黄->红的渐变色,那个这里我采用的是Layer(colorLayer) 3

如图所示是效果图,当向下拉时,图片会被拉出来,松手后恢复.和ListView的侧滑删除   1.视差特效 首先图片是通过addHeaderView加上去的,所以在设置Adapter前先设置一个View来作为头布局,图片的设置android:scaleType="centerCrop" 然后可以重写ListView主要是用通过overScrollBy来实现图片的拉出效果的,当拉出图片绘制后,重写onTouchEvent方法MotionEvent.ACTION_UP 实现回弹 如下是主代码

1.按钮:   按钮是游戏中最常用的控件类型之一,控制用户点击事件的开关,有正常.按下.禁用三种状态,您可以为他们设置样式及文本.   使用场景   按钮的使用十分普遍,以官方示例中的主场景示例为例,画框的内容均是由按钮控件组成   在您的项目中,界面上方的等级.钻石.钱币也可以由按钮控件组成,当用户触摸时,跳转至相应的界面.   按钮控件属性众多,除了常规属性外,还包含尺寸属性和一些特性属性,我们从经常使用按钮控件的几种场景为您介绍如何更好的使用这种控件   场景1:修改按钮背景,设置按钮按下

http://ask.dcloud.net.cn/docs HTML5自出现以来,几经风雨,虽看似很有前途,但实际使用问题太多,DCloud为此踩了无数坑.但我们从未放弃,我们加入了W3C,发起了 HTML5中国产业联盟,推出了HBuilder.HTML5plus runtime.mui框架等产品,直到我们终于可以使用HTML5开发出原生体验的App,并且把这些技术公开给开发者. HTML5过去被称为有“性工能”障碍,即性能不如原生,工具不如原生.功能不如原生. 我们先说工具,然后说能力,再说性

  document.addEventListener( 'touchstart', function(e){ e.preventDefault(); } ); 在document上增加touchstart事件,可以阻止: 1.页面文字被选中 —— 如果希望文字被选中,可以阻止冒泡 2.页面上的系统菜单 3.可以清除掉系统默认的回弹(touchmove也可以) 产生的隐患: 1.滚动条失败 —— 需要模拟滚动 事件点透: 在a元素上层覆盖了div,点击div的时候,下方的a链接也被触发跳转到相应

下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是webview. 既然拉div卡,那就不拉div,改拉webview.webview的拉动是原生的,回弹效果也是原生的,体验与原生一致.思路是在父页面写titlebar,titlebar下面10像素左右写一个“下拉可刷新”.然后append一个子webview,并设置为可下拉.那么在把子webview往下

闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pullToRefresh/ 项目地址:https://github.com/owenliang/pullToRefresh 实现注意: 利用transition做动画时,优先使用transform:translate取代top,后者动画流畅度存在问题. 各移动浏览器对手势触摸的处理不同(简单罗列如下),但

  前  言 轻量,原生UI,流畅体验,是MUI的三个特征.   1. 新手指南 快速体验 1. 下载Hello mui App 下载已打包好的Hello mui 手机app,直接在手机上体验mui的控件UI及能力展示  http://dcloud.io/hellomui/ 2. 创建Hello mui工程 可从https://www.dcloud.io下载Hbuilder,选择新建"移动APP",并选择"Hello MUI"工程模板,创建工程:然后通过数据线将手机