A Framer Studio module for deivce sensor to your project.
Demo - Orientation Sensor
Demo - Motion Sensor
check it on the device that provides the motion sensor (mobile).
https://vimeo.com/196395840 -
Full version Preview
- Multiple browser supported
- Orientation Sensor
- Motion Sensor
Copy the "module" folder and paste it into your prototype folder
More info about modules for Framer Studio: FramerJS Docs - Modules
- 360° Viewer : 360 degree rotation viewer
- Lenticular : 2 ~ 3 image transition
- Simulator for Desktop : Orientation Simulator
Sensor service
Get system service
- service [string] : service
Orientation sensor
Motion sensor
[Number] Coefficient of sensor transfer value
Since the sensor of the device reacts very sensitively, if the value transmitted from the sensor is used as it is, the small movement of the device will cause it to shake or vibrate. You can adjust the value to obtain a smoothly tuned value
When the sensor value changes
Events.Change - New sensor value.
Sensor.onChange(orientation or motion)
-
orientation [Object] - Orientation values (Orientation Sensor)
- alpha [Double] - Z-axis rotation
- beta [Double] - X-axis rotation
- gamma [Double] - Y-axis rotation
-
motion [Object] - Motion values (Motion Sensor)
- acceleration
- x [Double]
- y [Double]
- z [Double]
- accelerationIncludingGravity
- x [Double]
- y [Double]
- z [Double]
- rotationRate
- alpha [Double]
- beta [Double]
- gamma [Double]
- interval [Double]
- acceleration
More info about Device Orientation Event : W3C Device Orientation Event Specification
Screen.backgroundColor = "gray"
# SIZE = 200 # Cube cube = new Layer point: Align.center size: SIZE rotationY: 0, rotationX: -30 style: transformStyle: "preserve-3d" "-webkit-transform-style": "preserve-3d" backgroundColor: "" # Face properties properties = size: SIZE style: fontSize: "20px", fontWeight: "500", lineHeight: "#{SIZE}px" textAlign: "center", textTransform: "uppercase" boxShadow: "inset 0 0 30px rgba(0,0,0,0.2)" color: "rgba(0,0,0,.5)" backgroundColor: "rgba(255,255,255,1.1)" parent: cube # Front front = new Layer _.extend _.clone(properties), html: "front", z: 100 # Back back = new Layer _.extend _.clone(properties), html: "back", z: -100, rotationY: 180 # Top top = new Layer _.extend _.clone(properties), html: "top", rotationX: 90, y: -100 # Bottom bottom = new Layer _.extend _.clone(properties), html: "bottom", rotationX: -90, y: 100 # Left left = new Layer _.extend _.clone(properties), html: "left", rotationY: -90, x: -100 # RightSe right = new Layer _.extend _.clone(properties), html: "right", rotationY: 90, x: 100
# Module require 'System' # Sensor manager sensorManager = getSystemService(Context.SENSOR_SERVICE) # Sensor : Orientation sensorOrientation = sensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION) if sensorOrientation sensorOrientation.smooth = 0.1 sensorOrientation.onChange (event) -> cube.rotationX = -(event.beta) * 2 + 60 cube.rotationY = (event.gamma) * 2
or
# Module require 'System' # Sensor manager sensorManager = getSystemService(Context.SENSOR_SERVICE) # Sensor : Motion sensorMotion = sensorManager.getDefaultSensor(Sensor.TYPE_MOTION) if sensorMotion sensorMotion.smooth = 0.005 sensorMotion.onChange (event) -> cube.rotationX -= event.rotationRate.alpha cube.rotationY += event.rotationRate.beta