基于JS实现Android,iOS一个手势动画效果
作者:AndButcher 发布时间:2024-04-28 09:36:41
标签:android,ios,手势,动画
废话不多说了,先给大家展示下效果图:
这是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");
});
});


猜你喜欢
- 1.前言Python中函数的参数类型比较丰富,比如我们经常见到*args和**kwargs作为参数。初学者遇到这个多少都有点懵逼,今天我们来
- 正态分布(Normal distribution)又成为高斯分布(Gaussian distribution)若随机变量X服从一个数学期望为
- jwt的问题首先说明一个jwt存在的问题,也就是要替换jwt的原因:jwt无法在服务端主动退出的问题jwt无法作废已颁布的令牌,只能等到令牌
- 网上有这样一道题目:一个字符串String=“adadfdfseffserfefsefseetsdg”,找出里面出现次数最多的字母和出现的次
- 想买mate40,但总是抢不到,所以想试着能不能写个脚本代码。第一步:把想要抢购的商品加进购物车,注意:脚本是对购物车内全部商品进行下单操作
- 下面给大家介绍下小程序弹窗禁止页面滚动的效果:在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove但是如果弹
- 基于OpenCV2.4.8和 python 2.7实现简单的手势识别。以下为基本步骤 1.去除背景,提取手的轮廓2. RGB->YUV
- gRPC HTTP协议转换正当有这个需求的时候,就看到了这个实现姿势。源自coreos的一篇博客,转载到了grpc官方博客gRPC with
- 视图:mysql中的视图,视图与表有很多相似的地方,视图也是由若干个字段以及若干条记录构成,视图也可以作为select语句的数据源。视图中保
- 对于要搜索的元素越多,二分查找速度比简单查找快的更多 这是二分查找算法的优点,但二分算法也有缺点,二分算法只针对有序的列表,这样插入和删除就
- 这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 问题描述101/100,想要的结果是1,但是算出来的结果是1.01解决方案101 // 100结果图补充:python2 与 3:一般除法、
- 前言Django 和 DRF(django rest framawork) 的结合在 python 后台中经常出现的组合。对于异常的全局处理
- python去除文件中重复的行,我们可以设置一个一个空list,res_list,用来加入没有出现过的字符行!如果出现在res_list,我
- 1. ref在Vue3中,ref成为了一个全家桶,除了用于创建响应式数据之外,还可以用于引用DOM元素、组件实例和其他对象。以下是ref的具
- OpenCV提供了很多简单的语句,实现复杂的功能,根据颜色和鼠标交互的基础语句,我们可以建立一个简单的画板。尽管它简单,但是制作的框架步骤不
- 目录1.随机取小数:2.整数的随机选取:3.随机列表取数,元素打乱:总结1.随机取小数:import randomprint(random.
- ucky-canvas 介绍一个基于 Js + Canvas 的【大转盘 & 九宫格 & * 】抽奖, 致力于为 web
- 一、python批量解压提示:如果是重要数据解压前请先备份,解压后会覆盖原压缩文件!!解压前:解压后:文件名为英文:文件名中包含中文:代码如
- 导语轻松瘦 | 和闺蜜减肥的日常,谁说闺蜜是减肥路上的一座山?哈喽!大家好!我是木木子吖~小编有一个闺蜜,还是同一所学校读书毕业的,这体重在