先来看效果

这是iOS下的效果,android下完全一致。通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果。

下面是主要的代码

//index.ui.js

var do_Animator1 = mm("do_Animator");
do_Animator1.append(500, {
y: -1334,
curve:"Linear"
});
var do_Animator2 = mm("do_Animator");
do_Animator2.append(500, {
y: 0,
curve:"Linear"
}); do_Page.on("NextPagemoveing", function(){
currentView=json_define[currentIndex].view;
currentIndex++;
if (currentIndex>=json_define.length) currentIndex=0;
nextView=json_define[currentIndex].view; for(var i=0;i<json_define.length;++i){
if (json_define[i].view != currentView && json_define[i].view != nextView){
json_define[i].view.visible=false;
}
else{
json_define[i].view.visible=true;
}
} currentView.fire("closingBottom", "NextPagemove");
});
do_Page.on("NextPagemove", function(){
nextView.fire("initMoving", "NextPagemoved"); });
do_Page.on("NextPagemoved", function(){
currentView.y= 0;
nextView.y= 1332;
do_ALayout_main.y=0;
do_ALayout_main.redraw();
do_ALayout_main.animate(do_Animator1, function(){
nextView.fire("opening");
});
}); do_Page.on("PrePagemoveing", function(){
currentView=json_define[currentIndex].view;
currentIndex--;
if (currentIndex<0) currentIndex=json_define.length -1;
nextView=json_define[currentIndex].view; currentView.fire("closingHead", "PrePagemove");
});
do_Page.on("PrePagemove", function(){
nextView.fire("initMoving", "PrePagemoved");
});
do_Page.on("PrePagemoved", function(){
for(var i=0;i<json_define.length;++i){
if (json_define[i].view != currentView && json_define[i].view != nextView){
json_define[i].view.visible=false;
}
else{
json_define[i].view.visible=true;
}
}
currentView.y= 1332;
nextView.y= 0;
do_ALayout_main.y=-1334;
do_ALayout_main.redraw();
do_ALayout_main.animate(do_Animator2, function(){
nextView.fire("opening");
});
});

完全的项目代码参考:https://github.com/do-project/code4do/tree/master/demoECode

轻松实现Android,iOS的一个手势动画效果的更多相关文章

  1. iOS CAReplicatorLayer 实现脉冲动画效果

    iOS CAReplicatorLayer 实现脉冲动画效果 效果图 脉冲数量.速度.半径.透明度.渐变颜色.方向等都可以设置.可以用于地图标注(Annotation).按钮长按动画效果(例如录音按钮 ...

  2. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

  3. 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计

    要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...

  4. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  5. 【Android初级】如何实现一个有动画效果的自定义下拉菜单

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

  6. iOS 一个小动画效果-b

    近期工作不忙,来一个需求感觉棒棒的,是一个比较简单的页面,如下图(图1) 图1 应该很简单吧,没什么大的功能,就是一个展示,一个拨打电话,拨打电话不需要说,几行代码搞定,基本UI也不用说了,刚培训完的 ...

  7. iOS开发 QQ粘性动画效果

    QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.ht ...

  8. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  9. Android小项目之五 splash动画效果

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...

随机推荐

  1. crontab 管理指定用户的定时任务

    创建用户定时任务文件 touch /var/spool/cron/target_user crontab -u target_user /var/spool/cron/target_user 编辑用户 ...

  2. Java中PreparedStatement与Statement的总结

    概要: PreparedStatement 接口继承自 Statement 接口,PreparedStatement 比普通Statement 对象使用起来更加灵活,更有效率. 一.PreparedS ...

  3. 启动eclipse时:java is started but returned code 13

    此问题是eclipse位数和java位数不匹配造成的 我的是win10 64位的eclipse + 32位的java造成的问题 查看eclipse位数:用记事本打开eclipse根目录下的eclips ...

  4. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  5. oracle里面base64加解密

    1. base64 的解密函数select utl_raw.cast_to_varchar2(utl_encode.base64_decode(utl_raw.cast_to_raw('dGVzdA= ...

  6. CentOS 7中防火墙 firewall-cmd命令

    在 CentOS 7 iptable 防火墙已经被 firewall替代 1.暂时开放FTP服务 firewall-cmd --add-service=ftp 2.永久开放FTP服务 firewall ...

  7. iOS计算完整文字高度(适应iOS 10)

    动态计算文字的高度:(切记LineSapcing>=2,不然会显示不全) +(CGSize) boundingALLRectWithSize:(NSString*) txt Font:(UIFo ...

  8. css3水波纹效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 如何做好GPS平台软硬件集成测试

    集成测试是为了构建一个更大的系统或平台,这个系统的几个部分通常是由不同的团队或甚至不同的公司开发的,以前在做信息化的软件开发时,面临的集成测试通常是不同软件子系统之间的集成测试,往往被这一阶段的测试搞 ...

  10. 不同数据库中同一张表的SQL循环修改语句

    select sample_value,Sample_GUID,row_number() over(order by sample_value )as rownumber into  #AATemp  ...