I'm a designer and very new to Framer.
Id like to be able to hide/show the navigation at the top of screen based on the direction the content below is scrolled. If I start to scroll down the page, the nav hides by moving up. And then the opposite.
Here's what I've been playing around with, but no luck so far.
scroll.on Events.Scroll, ->
if scroll.scroll > scroll.scrollY then psd.subHead.animate
properties:
y: -50
else scroll.scroll < scroll.scrollY then psd.subHead.animate
properties:
y: 0
I suppose I want to move up if scroll position is less than the current position and down if it's greater.
Any help is much appreciated!
The ScrollComponent layer has a direction property. From the docs:
scroll.direction
Current scrolling direction. Returns "up", "down", "left", or "right".
The scrolling direction is the inverse of the direction of the drag
action: when dragging downwards, you're effectively scrolling upwards.
This property is read-only.
Below is some example code to get you started. You can find the scroll.direction usage near the bottom.
Framer.Defaults.Animation = time: 0.3
scroll = new ScrollComponent
width: Screen.width
height: Screen.height
scrollHorizontal: false
backgroundColor: "blue"
contentInset:
top: 10
bottom: 10
borderRadius: 8
for i in [0..10]
layerA = new Layer
width: Screen.width - 20, height: 150
x: 10, y: 160 * i
backgroundColor: "#fff"
superLayer: scroll.content
borderRadius: 4
navBar = new Layer
x: 0
y: 0
width: Screen.width
height: 130
borderRadius: 8
backgroundColor: "red"
scroll.on Events.Scroll, ->
if scroll.direction == "up"
navBar.animate
properties:
y: 0
if scroll.direction == "down"
navBar.animate
properties:
y: -130
Related
I am designing a main menu for an app that i am creating, but i cant seem to figure out how to border a boxlayout in kivy, is there a way to do this? If so could someone help. I have tried to use a canvas.before and bordering the rectangle but that doesn't work.
<MainMenuWindow>:
id: Main_Menu_window ## setting the id to Login_window
BoxLayout: ## whole screen
orientation: 'horizontal'
BoxLayout: ## left hand side 1/3
canvas.before:
Color:
rgba: 0, 0, 0, 1
Line:
width:
rectangle: self.x, self.y, self.width, self.height
orientation: 'vertical' ## setting orientation of the screen to vertical
size_hint_x: 1/3 ## setting size of box to 1/3 of the screen
canvas.before:
Color: ## just for debugging reasons
rgba: (255/255,255/255,255/255, 1) ## setting colour
Rectangle:
size: self.size ## setting size to the size of the box layout
pos: self.pos ## setting position to the position of the box layout
A BoxLayout tries to use all its available space by allocating a share to each child. Since your inside BoxLayout is the only child of the outside BoxLayout, it will be allocated the entire space of the outside BoxLayout. So, you can control the size of your inner BoxLayout either by adjusting the size of the outer BoxLayout, or by explicitly setting the size of the inner BoxLayout (with size_hint: None, None).
So, here is one way to get the inner BoxLayout to one third the screen width:
<MainMenuWindow>:
id: Main_Menu_window ## setting the id to Login_window
BoxLayout: ## whole screen
orientation: 'horizontal'
BoxLayout: ## left hand side 1/3
canvas.before:
Color:
rgba: 1, 0, 0, 1
Line:
width: 20
rectangle: self.x, self.y, self.width, self.height
orientation: 'vertical' ## setting orientation of the screen to vertical
Label: ## middle third
text: 'Abba'
Label: ## right third
text: 'Dabba'
I have a view that I want to overlay with a transparent black layer whose edges match the view exactly. The view does not clip its bounds, so subviews may be hanging off.
The obvious solution is the mask property of CALayer, but the docs say that the mask layer "must not have a superlayer" or the behavior is undefined.
I was hoping that using the presentationLayer of that view would be an effective workaround, but I don't think I fully understand what presentation layers are, as that property returns nil.
Does anyone have tips on how I could mask my transparent black layer to match the shape of the view over which it will be drawn? Thanks.
There’s a less obvious solution to this that should work better than masking: a blend-mode filter, specifically source-atop. If you add your transparent layer as a sibling of the layers it’s supposed to dim, and assign it the appropriate CI compositing filter, it will dim those layers without affecting anything outside of their boundaries. As a bonus, you’ll get correct antialiasing at the edges, unlike the masked-overlay approach.
Here’s an example. For illustrative purposes I made the dimming layer only half the height of the area it covers, but you’d of course want to make it larger.
let container = CALayer()
container.backgroundColor = NSColor.systemBlue.cgColor
container.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
let dimmedRoot = CALayer()
let dimmedLayer1 = CALayer()
dimmedLayer1.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
dimmedLayer1.backgroundColor = NSColor.systemGreen.cgColor
dimmedLayer1.transform = CATransform3DMakeRotation(0.3, 0, 0, 1)
let dimmedLayer2 = CALayer()
dimmedLayer2.frame = CGRect(x: 80, y: 80, width: 100, height: 100)
dimmedLayer2.backgroundColor = NSColor.systemPurple.cgColor
dimmedLayer2.transform = CATransform3DMakeRotation(-0.1, 0, 0, 1)
let dimmingLayer = CALayer()
dimmingLayer.frame = CGRect(x: 0, y: 50, width: 200, height: 100)
dimmingLayer.backgroundColor = NSColor(white: 0, alpha: 0.5).cgColor
dimmingLayer.compositingFilter = CIFilter(name: "CISourceAtopCompositing")
dimmedRoot.sublayers = [ dimmedLayer1, dimmedLayer2, dimmingLayer ]
container.addSublayer(dimmedRoot)
Jssor i great! - But when i included the banner in my code through my DNN7 CMS, the captions doesn't animate, even though the slides change as expected - i wrote:
<div class="container" style="padding:0px !important">
<div id="slider1_container" style="display: none; position: relative; margin: 0 0; width: 1100px; height: 300px; overflow: hidden;">
<div style="cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1100px; height: 300px;" u="slides">
<div><img src="/portals/0/designelementer/headlines/agHeader6.jpg" u="image" />
<div style="position:absolute;" t="ZM" u="caption">Bliv medlem</div>
</div>
<div><img src="/portals/0/designelementer/headlines/agHeader1.jpg" u="image" /></div></div></div></div>
You can see the page here: Link
(Beware, it's in danish)
Anybody got a hint for me? What am I doing wrong?
Please move $CaptionSliderOptions out from $BulletNavigatorOptions.
replace
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
$Scale: false, //Scales bullets navigator or not while slider scale
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
}
with
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
$Scale: false //Scales bullets navigator or not while slider scale
},
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
I have been struggling recently creating a filled Circle in Kivy that stays a circle when the window is re-sized to a different width or height. I looked at the question here:
Centering an object in Kivy
But when I implement my Circle like so:
<BigCircle>
width: min(self.size)
height: min(self.size)
pos_hint: {'center_x': .5, 'center_y': .5}
canvas:
Color:
rgb: 1, 1, 0
Ellipse:
size: self.size
pos: self.pos
<MainScreen>:
FloatLayout
size: root.size
canvas:
Color:
rgb: 1, 1, 1
Rectangle:
size: self.size
BigCircle:
id: big_cir
class MainScreen(Screen):
pass
class MyApp(App):
def build(self):
sm = ScreenManager(transition=NoTransition())
sm.add_widget(MainScreen(name="Main"))
return sm
I get the error:
[Critical][Clock ]Warning, too much iteration done before the next frame. Check your code, or increase the Clock.max_iteration attribute
I am doing nothing with the Clock, but I am using a ScreenManager. Currently, MainScreen is the only screen. If I change the height/width to not include the min() then it works, but that is necessary to keep the Circle circular. Otherwise it becomes elongated when re-sized and looks bad.
The problem is you have an infinite loop due to BigCircle width and height being adjusted based on its size (width, height). Try changing your BigCircle to:
<BigCircle>
canvas:
Color:
rgb: 1, 1, 0
Ellipse:
size: min(self.size), min(self.size)
pos: root.center_x - min(self.size)/2, root.center_y - min(self.size)/2
I have created a label and would like to place it on certain coordinates. Is there a way I can directly set the x and y coordinates to place the label in Titanium.
Very simply, just set the top and left values to to your respective Y and X values. These are relative to the labels parent, and will not work as expected if you set the parents layout property to anything but composite:
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
text: 'A simple label',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30, // Your Y coordinate
left : 20, // Your X coordinate
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
Check this guide for more information about views, and positioning.