GithubHelp home page GithubHelp logo

tgideas / motion Goto Github PK

View Code? Open in Web Editor NEW
449.0 449.0 112.0 18.16 MB

Motion is a javascript library based on Zepto for mobile

Home Page: http://tgideas.github.io/motion

JavaScript 86.76% HTML 10.43% CSS 2.55% Shell 0.14% Batchfile 0.12%

motion's People

Contributors

cnwander avatar jcyuan avatar lyushine avatar mamboer avatar witjs avatar zgr0629 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

motion's Issues

问题描述

网站上的预加载和(对话框、浮层)组件共用的时候 ,对话框和浮层组件的样式没调用。。

Animation组件对同个元素进行2次动画,第二次会无限循环

window.s3LT = new mo.Animation({
        target: $('.s3_layer_lt'),
        fillMode: 'forwards',
        duration: 500,
        iteration: 1,
        keyframes: {
            0: {'opacity': '0', easing: 'ease-in-out'},
            100: {'opacity': '1'}
        }
    });
s3LT.on("end",function(){
window.s3LTBack = new mo.Animation({
    target: $('.s3_layer_lt'),
    fillMode: 'forwards',
    duration: 500,
    iteration: 1,
    keyframes: {
        0: {'opacity': '0', easing: 'ease-in-out'},
        100: {'transform': 'translate3d(0,0,0)', easing: 'ease-in-out'}
    }
});
})

第一个动画on end的时候再针对本身DOM初始化一个新的动画,此时head标签会无限插入新的animation

Use stricts arguments.callee

slide.v2.0.js

line 47
var constructor = function(){
var mainFn = arguments.callee.prototype.init;
if (typeof(mainFn) == 'function' && arguments.callee.caller != me) {
mainFn && mainFn.apply(this, arguments);
}
};

arguments.callee is deprecated.

test environment
wechat version 6.3.15(android and ios)

motion.js not working on strict mode.

对比ImageEditor与croppie、cropper等图片裁剪库API设计问题

实现固定大小的图片裁剪

怎么让裁剪框不动,拖动图片(可放大缩小,最小不小过裁剪框)
我看croppie和cropper的API上都很清楚,区分裁剪框和容器

croppie

var vanilla = new Croppie(el, {
  viewport: {
    width: 300,
    height: 300
  },
  boundary: {
    width: 300,
    height: 300
  },
  showZoomer: false,
  // enableExif: true,
  enableOrientation: true
});
vanilla.bind({
  url: objectURL,
  orientation: 6
});
vanilla.result({
  type: 'blob',
  size: {
    width: 300,
    height: 300
  },
  // format: 'jpeg',
  // quality: 0.8
}).then(function (blob) {
  // do something with cropped blob
});

cropper

$(element).cropper({
  // width: 300,
  // height: 300,
  viewMode: 3,
  dragMode: 'move',
  autoCropArea: 1,
  restore: false,
  guides: false,
  highlight: false,
  cropBoxMovable: false,
  cropBoxResizable: false,
  aspectRatio: 1,
})

求使用 motionImageEditor的代码示例

landscape.min.js bug

一个是手机那个图片旋转的动画,你们写死了Shine_landscapeAni,忘记改成从配置里面读取前缀了。所以如果前缀不是Shine,就没有动画了。

然后就是
window.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
landscape();
if(_this.option.init){
_this.option.init();
}
},50);
});
实在不知道为什么要这么写,直接
setTimeout(function () {
landscape();
}, 50);
感觉挺好的。

ImageEditor 代码问题

在ImageEditor处理图片上传的时候有这么一段代码self.trigger('beforechange') 但是,这个最终是用Zepto处理的,但是Like trigger, but triggers only event handlers on current elements and doesn’t bubble. 也就是说这个代码根本没啥用self是一个对象,不是一个DOM,请问下加上这个代码的原因,谢谢。

landscape.js存在问题

问题一:提示信息,横屏竖屏提示信息反了;
问题二:竖屏模式在进入竖屏时,首次进入页面会触发提示,二次旋转时恢复正常,首次进入横屏时,没有提示,二次旋转恢复正常,横屏模式同理

Landscape组件的两个bug

  1. 获取配置参数错误错误:不知道哪里来的_this.option,这个问题已经有PR了,在这里:#21
  2. 横屏图标指示不对,需要修改下样式动画

原样式:

+'@-webkit-keyframes '+config.prefix+'_landscapeAni{0% {-webkit-transform:rotate(-90deg);}30% {-webkit-transform:rotate(-90deg);}70%{-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(0deg);}}'
+'@keyframes '+config.prefix+'_landscapeAni{0% {transform:rotate(-90deg);}30% {transform:rotate(-90deg);}70%{transform:rotate(0deg);}100% {transform:rotate(0deg);}}';

应改为:

+'@-webkit-keyframes '+config.prefix+'_landscapeAni{0% {-webkit-transform:rotate(0deg);}30% {-webkit-transform:rotate(0deg);}70%{-webkit-transform:rotate(90deg);}100% {-webkit-transform:rotate(90deg);}}'
+'@keyframes '+config.prefix+'_landscapeAni{0% {transform:rotate(0deg);}30% {transform:rotate(0deg);}70%{transform:rotate(90deg);}100% {transform:rotate(90deg);}}';

微信微信BUG

最新版微信,通过二维码识别进入的网页,只有有上传组件()点击会闪退,求快点修复,谢谢谢谢~~~

ImageEditor 竟然没有导出为png的方法啊!!!!!

/**
* 导出base64 png数据
*/
_public.toDataPngURL = function (callback) {
var self = this;
// 去除编辑状态的元素
self.unSelect();
window.setTimeout(function () {
var data = self.canvas.toDataURL("image/png");
callback.call(self, data);
}, 1000 / self.config.fps)
}

自己再后面加了这个方法,不知道你们会不会觉得不好~~

貌似打包下载下来以后就失效了

我在下载页面打包下载了包含Zepto的全部组件的压缩版。
http://tgideas.github.io/motion/component/demo/slide/demo5.html
这个页面除了js改为本地加载了以外原封不动的copy下来,然后运行没有效果,还在页面里多了一段vbscript

Function IEBinary_getByteAt(strBinary, iOffset)
    IEBinary_getByteAt = AscB(MidB(strBinary, iOffset + 1, 1))
End Function
Function IEBinary_getBytesAt(strBinary, iOffset, iLength)
  Dim aBytes()
  ReDim aBytes(iLength - 1)
  For i = 0 To iLength - 1
   aBytes(i) = IEBinary_getByteAt(strBinary, iOffset + i)
  Next
  IEBinary_getBytesAt = aBytes
End Function
Function IEBinary_getLength(strBinary)
    IEBinary_getLength = LenB(strBinary)
End Function

0320首次分享-用户关注的问题

  1. Animation组件的性能
    可以做一些性能测试
  2. 多媒体这边flash导出的动画数据,motion能否提供一个动画引擎组件来解析这种数据
  3. PPT里面的translation应为transition
  4. Animation组件,transition和animation的选择,应该保留transition出现问题的demo
  5. 打包出来的代码,使用兼容CMD、AMD规范的写法。参考jQuery

LaunchAPP

这个组件怎么用啊 怎么找androidScheme iosScheme packageName

silde 组件enable()方法bug

默认情况下第一屏向下拉不会拉到最后一屏,但是当disable(0) 再enable(0)的时候,第一屏可以拉到最后一屏。

landscape组件config中的txt不被应用

是我使用的在线库版本问题还是一直存在?
var landscape = new mo.Landscape({
mode : "landscape",
txt : "blah blah"
});

显示时依然显示默认的文字 "为了更好的体验xxxxx"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.