I have a coloranimation in a UWP application to animate the background of a TextBox:
animation = new ColorAnimation();
animation.Duration = TimeSpan.FromMilliseconds(600);
animation.From = Colors.White;
animation.To = Color.FromArgb(255, 40, 40, 40);
animation.RepeatBehavior = new RepeatBehavior(2);
flashStoryBoard = new Storyboard();
flashStoryBoard.Children.Add(animation);
Storyboard.SetTarget(animation, MyBox);
Storyboard.SetTargetProperty(animation, "(Panel.Background).(SolidColorBrush.Color)");
When I run the animation above, the animation ends in the TextBox having a white background color instead of the expected default (which is the dark 40, 40 ,40 color..). When I remove the repeatbehavior the animation runs just fine but of course only once. There are no easing functions applied. When I set the fillbehavior to stop, I get a flickering effect at the end of the animation.
Any ideas?
When I run the animation above, the animation ends in the TextBox having a white background color instead of the expected default (which is the dark 40, 40 ,40 color..).
I'm not able to reproduce this problem, by my side it ends with the color "FF404040". Maybe you can create a new blank project and try your posted code again. Or you can share your sample with us.
When I set the fillbehavior to stop, I get a flickering effect at the end of the animation.
I think you are trying to make the TextBox's background changed from white to dark gray twice when the TextBox is loaded, but when set RepeatBehavior equals or over two times, it will flicker one more time very quickly in the end.
I found a workaround for this scenario, it makes the animation ending with the color "FF404040" and will not flicker in the end:
Storyboard flashStoryBoard = new Storyboard();
ColorAnimation animation = new ColorAnimation();
animation.Duration = TimeSpan.FromMilliseconds(600);
animation.To = Colors.White;
animation.From = Color.FromArgb(255, 40, 40, 40);
animation.RepeatBehavior = new RepeatBehavior(2);
animation.AutoReverse = true;
flashStoryBoard.Children.Add(animation);
Storyboard.SetTarget(animation, MyBox);
Storyboard.SetTargetProperty(animation, "(Panel.Background).(SolidColorBrush.Color)");
flashStoryBoard.Begin();
As you can see in my code, I swap the animation.To and the animation.From, and set the AutoReverse property to true. Since your animation's Duration is only 0.6s, I think this method will not effect the user experience and can solve the flickering problem.
Related
I'm trying to make a TextField like in the image using Jetpack Compose.
So far no luck in finding a easy way.
The label must stay inside the outline, if I use OutlinedTextField there is no way to customise that. If I use the TextField which has the label on the inside there is no outline when selected, just the line below the textfield.
Also I need to add a shadow/glow effect with a custom color, here seen in gold.
I'm stumped..
Any thoughts?
You can do this by creating a Row with a Modifier.drawBehind that uses native paint to draw blur with color as in this image, the one with pink background has blur with same background color for shadow for instance, you can check the code for drawing colored blur here.
val myColor = color
.copy(alpha = shadow.alpha)
.toArgb()
val transparent = color
.copy(alpha = 0f)
.toArgb()
frameworkPaint.color = transparent
frameworkPaint.setShadowLayer(
radius,
dx,
dy,
myColor
)
it.drawRoundRect(
//...
paint = paint
)
It draws a shape behind you can draw a shape with stroke.
For the label and input create a Column with Modifier.weight() to use space inside row other than space reserved for Icon with close image.
Instead of TextField you can use a BasicTextfield which doesn't have default padding, however you can achieve the same thing with TextField too, but you will need to set colors to transparent to remove indicator line, it has some default padding you might not want to have.
TextField(
colors = TextFieldDefaults.textFieldColors(
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
)
)
My very first question to stackoverflow, so please be kind.
I have two shapes on a createjs stage. The first one background covers the whole stage and has a listener on click defined. I want to put another shape on this one and this one should not trigger the click-listener defined on the background.
In the following example a click on the red circle triggers the listener of background.
var stage = new createjs.Stage('c');
var rect = new createjs.Shape();
rect.graphics.beginFill('#0000ff').drawRect(0, 0, 50, 50);
var background = new createjs.Shape();
background.graphics.beginFill('#000000').drawRect(0, 0, 500, 500);
background.alpha = 0.7;
background.on('click', function () {
circle.visible = !circle.visible;
stage.update();
});
var circle = new createjs.Shape();
circle.graphics.beginFill('#ff0000').drawCircle(225, 225, 50);
// circle.on('click', function () {});
stage.addChild(rect);
stage.addChild(background);
stage.addChild(circle);
stage.update();
https://codepen.io/anon/pen/rKmPOY
I found, that if I put an empty click listener on the circle, I have what I want, but this feels awkward.
What is the right approach here? This shouldn't be a bubbling issue since background and circle are siblings. Or am I getting this completly wrong?
If something doesn't have a click listener, it will not be evaluated when the mouse is clicked. This is definitely a desired behaviour (it is much more annoying to have things you don't want blocking clicks).
Your workaround adding an empty listener is fine, and pretty typical.
The only other option I can think of is to check what is under the mouse on click, and filter it manually, which is way more work.
Cheers,
I want to set the background color to blank, using the renderer.setClearColor (0xff0000, 0)[setClearColor ]:Changing three.js background to transparent or other color, setting the opacity to 0, although the background is not there, but on the page, there is almost no model
I have added some photo instructions,but the reputation is not enough， please check the link :https://github.com/shunzizhan/threejsDemo/wiki/three-scene
this.renderer = new WebGLRenderer({
antialias: true,
alpha: true
})
Set properties alpha true and then
this.renderer.setClearColor(0xffffff, 0)
it works
I have created one button and applied image (.png with transparent background) on it.
My button background is set on transparent but as you can see the background color is still there.
How can I make this work as it should?
Give this a shot.
'Making Existing Button Transparent
btnKasa.FlatStyle = Windows.Forms.FlatStyle.Flat
btnKasa.FlatAppearance.BorderSize = 0
btnKasa.FlatAppearance.MouseDownBackColor = Color.Transparent
btnKasa.FlatAppearance.MouseOverBackColor = Color.Transparent
btnKasa.BackColor = Color.Transparent
Another option that I came up with is to call:
SetStyle(ControlStyles.SupportsTransparentBackColor, True)
when the form is created (e.g. in the constructor after InitializeComponent()). The button's BackColor is set to Transparent, as well (this can be done in code behind or in the properties).
I am doing DoubleAnimation of the Width property of a Canvas. I want to shrink the canvas to 1/5 th of the size.
var widthAnimation = new DoubleAnimation();
widthAnimation.Duration = new TimeSpan(0,0,1);
StoryBoard.SetTarget(widthAnimation, Canvas1);
StoryBoard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
widthAnimation.From = Canvas1.Width;
widthAnimation.To = Canvas1.Width * .2;
StoryBoard stb = new StoryBoard();
stb.Children.Add(widthAnimation);
stb.Begin();
Somehow, the above animation does not shrink the size to 1/5th. Instead, it enlarges the canvas. Any clues why the animation is doing something funny?
The canvas was wrapped in a viewbox. The Viewbox size was fixed, while the canvas within it shrinked. The text expanded. Not sure why. But, I fixed the problem by applying the animation to the Viewbox rather than the Canvas. And it works all fine now.