You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
whenever i animate a rotation using the Spring modifier, It causes a wierd flickering that i cant get rid of. The problem doesnt seem to occur on my computer. I am on a microsoft surface 3 pro. I am using a iphone5 as my mobile. Below is a code snippet of my issue:
varDOMElement=require('famous/dom-renderables/DOMElement');varPhysicsEngine=require('famous/physics/PhysicsEngine');varFamousEngine=require('famous/core/FamousEngine');varphysics=require('famous/physics');varmath=require('famous/math');varBox=physics.Box;varSpring=physics.Spring;varRotationalSpring=physics.RotationalSpring;varRotationalDrag=physics.RotationalDrag;varQuaternion=math.Quaternion;varVec3=math.Vec3;functionPager(node,options){this.node=node;this.currentIndex=0;this.pageWidth=0;varresizeComponent={onSizeChange: function(x,y,z){this.defineWidth(x,y);}.bind(this)};this.node.addComponent(resizeComponent);// Add a physics simulation and update this instance// using regular time updates from the clock.this.simulation=newPhysicsEngine();// .requestUpdate will call the .onUpdate method next frame, passing in the time stamp for that frameFamousEngine.requestUpdate(this);this.pages=_createPages.call(this,node,options.pageData);}Pager.prototype.defineWidth=function(width,height){this.pageWidth=width;this.pageHeight=height;};Pager.prototype.onUpdate=function(time){this.simulation.update(time)varpage;varphysicsTransform;varp;varr;for(vari=0,len=this.pages.length;i<len;i++){page=this.pages[i];// Get the transform from the `Box` bodyphysicsTransform=this.simulation.getTransform(page.box);p=physicsTransform.position;r=physicsTransform.rotation;// Set the `imageNode`'s x-position to the `Box` body's x-positionpage.node.setPosition(p[0]*this.pageWidth,p[1]*this.pageHeight,0);// Set the `imageNode`'s rotation to match the `Box` body's rotationpage.node.setRotation(r[0],r[1],r[2],r[3]);}FamousEngine.requestUpdateOnNextTick(this);};Pager.prototype.pageChange=function(oldIndex,newIndex){if(oldIndex<newIndex){this.pages[oldIndex].anchor.set(-1,0,0);this.pages[oldIndex].quaternion.fromEuler(0,Math.PI/2,0);//this seems to be causing the problemthis.pages[newIndex].anchor.set(0,0,0);this.pages[newIndex].quaternion.set(1,0,0,0);}else{this.pages[oldIndex].anchor.set(1,0,0);this.pages[oldIndex].quaternion.fromEuler(0,-Math.PI/2,0);//this seems to be causing the problemthis.pages[newIndex].anchor.set(0,0,0);this.pages[newIndex].quaternion.set(1,0,0,0);}this.currentIndex=newIndex;};//Jamel's AdditionsvarGestureHandler=require('famous/components/GestureHandler');varPosition=require('famous/components/Position');function_createPages(root,pageData){varpages=[];for(vari=0;i<pageData.length;i++){varcontainerNode=root.addChild();varimageNode=containerNode.addChild();varbackNode=containerNode.addChild();varinputNode=containerNode.addChild();//Jamel's Additionsvargestures=newGestureHandler(containerNode);varresizeComponent;(function(i){gestures.on('drag',functioncallback(e){// console.log(e.centerDelta.y);if(e.centerDelta.x<-25)pages[i].quaternion.fromEuler(0,-Math.PI,0);elseif(e.centerDelta.x>25)pages[i].quaternion.set(1,0,0,0);elseif(e.centerDelta.y<-25){console.log("we are swiping up",pages[i].anchor)pages[i].anchor.set(0,-0.8,0);pages[i].inputPos.set(0,700,0,{duration: 200})pages[i].input.setProperty("opacity",1)}elseif(e.centerDelta.y>25){console.log("we are swiping up",pages[i].anchor)pages[i].anchor.set(0,0,0);pages[i].inputPos.set(0,0,0,{duration: 200})pages[i].input.setProperty("opacity",0)}});}(i))containerNode.setSizeMode('absolute','absolute')containerNode.setAbsoluteSize(500,800,0);containerNode.setAlign(0.5,0.5);containerNode.setMountPoint(0.5,0.5);containerNode.setOrigin(0.5,0.5);// imageNode.setSizeMode(1,1,1)imageNode.setProportionalSize(1,1).setDifferentialSize(0,0);imageNode.setAlign(0.5,0.5);imageNode.setMountPoint(0.5,0.5);imageNode.setOrigin(0.5,0.5);// backNode.setSizeMode(1,1,1)backNode.setProportionalSize(1,1).setDifferentialSize(0,0);backNode.setAlign(0.5,0.5);backNode.setMountPoint(0.5,0.5);backNode.setOrigin(0.5,0.5);backNode.setRotation(0,Math.PI,0);backNode.setPosition(0,0,-5)inputNode.setProportionalSize(1,0).setDifferentialSize(0,25);inputNode.setAlign(0.5,0.5);inputNode.setMountPoint(0.5,0.5);inputNode.setOrigin(0.5,0.5);// inputNode.setPosition(0,0,-20);varinputPos=newPosition(inputNode);varinput=newDOMElement(inputNode,{tagName: "input"});input.setProperty("opacity",0);varcont=newDOMElement(containerNode);cont.setProperty("backface-visibility","visible")varel=newDOMElement(imageNode);el.setProperty('backgroundImage','url('+pageData[i]+')');el.setProperty('background-repeat','no-repeat');el.setProperty('background-size','cover');varback=newDOMElement(backNode);back.setProperty('backgroundImage','url('+pageData[i]+')');back.setProperty('background-repeat','no-repeat');back.setProperty('background-size','cover');// A `Box` body to relay simulation data back to the visual elementvarbox=newBox({mass: 100,size: [100,100,100]});// Place all anchors off the screen, except for the// anchor belonging to the first image nodevaranchor=i===0 ? newVec3(0,0,0) : newVec3(1,0,0);// Attach the box to the anchor with a `Spring` forcevarspring=newSpring(null,box,{period: 0.6,dampingRatio: 0.5,anchor: anchor});// Rotate the image 90deg about the y-axis,// except for first image nodevarquaternion=i===0 ? newQuaternion() : newQuaternion().fromEuler(0,-Math.PI/2,0);// Attach an anchor orientation to the `Box` body with a `RotationalSpring` torquevarrotationalSpring=newRotationalSpring(null,box,{period: 1,dampingRatio: 0.6,anchor: quaternion});// Notify the physics engine to track the box and the springsthis.simulation.add(box,spring,rotationalSpring);pages.push({node: containerNode,el: el,box: box,inputPos: inputPos,input: input,spring: spring,quaternion: quaternion,rotationalSpring: rotationalSpring,anchor: anchor});}returnpages;}module.exports=Pager;
I modified the carousel demo to get assimilated to the famo.us engine. any help would be great.
The text was updated successfully, but these errors were encountered:
whenever i animate a rotation using the Spring modifier, It causes a wierd flickering that i cant get rid of. The problem doesnt seem to occur on my computer. I am on a microsoft surface 3 pro. I am using a iphone5 as my mobile. Below is a code snippet of my issue:
I modified the carousel demo to get assimilated to the famo.us engine. any help would be great.
The text was updated successfully, but these errors were encountered: