Skip to content
Permalink
Browse files

Animating to a suggested size

  • Loading branch information
nvh committed Nov 15, 2017
1 parent 4939336 commit d3ed9ecb83141c1ce6bdb23a26dd25d1feff5662
Showing with 34 additions and 12 deletions.
  1. +34 −12 framer/Components/DeviceComponent.coffee
@@ -174,7 +174,8 @@ class exports.DeviceComponent extends BaseClass
@background.y = 0 - backgroundOverlap
@background.width = window.innerWidth + (2 * backgroundOverlap)
@background.height = window.innerHeight + (2 * backgroundOverlap)

if @disableSizeUpdates
return
@_updateDeviceImage()
@_updateMaskImage()
@screenMask.visible = @hideBezel
@@ -476,8 +477,7 @@ class exports.DeviceComponent extends BaseClass
@emit("change:deviceScale")


_calculatePhoneScale: ->

_calculatePhoneScale: (windowWidth, windowHeight) ->
# Calculates a phone scale that fits the screen unless a fixed value is set
dimension = if @hideBezel then @screen else @phone

@@ -489,9 +489,11 @@ class exports.DeviceComponent extends BaseClass
paddingOffset = @_device?.paddingOffset or 0
padding = (@padding + paddingOffset) * 2

windowWidth ?= window.innerWidth
windowHeight ?= window.innerHeight
phoneScale = _.min([
(window.innerWidth - padding) / width,
(window.innerHeight - padding) / height
(windowWidth - padding) / width,
(windowHeight - padding) / height
])

# Only scale in fixed steps, to reduce blurriness, and pixel cracks
@@ -556,7 +558,7 @@ class exports.DeviceComponent extends BaseClass

set: (orientation) -> @setOrientation(orientation, false)

setOrientation: (orientation, animate=false) ->
setOrientation: (orientation, animate=false, suggestedSize=null) ->

orientation *= -1 if Utils.framerStudioVersion() is oldDeviceMaxVersion

@@ -580,26 +582,46 @@ class exports.DeviceComponent extends BaseClass
@_orientation = orientation

# Calculate properties for the phone
phoneProperties =
handsProperties =
rotationZ: -@_orientation
scale: @_calculatePhoneScale()

options = _.clone(@animationOptions)
if suggestedSize?
scale = @_calculatePhoneScale(suggestedSize.width, suggestedSize.height)
handsProperties.x = (suggestedSize.width / 2) - (@hands.width / 2.0)
handsProperties.y = (suggestedSize.height / 2) - (@hands.height / 2.0)
options.time = null
# Converted with Origami from Bounciness 5, Speed 12
options.curve = Spring(tension: 342.10059, friction: 28.97662)
else
scale = @_calculatePhoneScale()

handsProperties.scale = scale
contentProperties = @_viewportOrientationOffset()

@hands.animateStop()
@viewport.animateStop()

if animate
animation = @hands.animate _.extend @animationOptions,
properties: phoneProperties
@viewport.animate _.extend @animationOptions,
previousBackgroundColor = @background.backgroundColor
if @hideBezel
@screenBackground.visible = false
@background.backgroundColor = @screen.backgroundColor
@disableSizeUpdates = true
animation = @hands.animate _.extend options,
properties: handsProperties
@viewport.animate _.extend options,
properties: contentProperties

animation.on Events.AnimationEnd, =>
@_update()

animation.on Events.AnimationStop, =>
@disableSizeUpdates = false
@background.backgroundColor = previousBackgroundColor

else
@hands.props = phoneProperties
@hands.props = handsProperties
@viewport.props = contentProperties
@_update()

0 comments on commit d3ed9ec

Please sign in to comment.
You can’t perform that action at this time.