我试图在两个子视图(view1和view2)之间创建一个过渡.按下按钮时,我希望view1(正面)翻转并显示view2(背面).我已经尝试过transitionFromView和transitionWithView.每个都有效 - 但每个都有问题.
transitionFromView - 翻转superview(整个窗口视图翻转,而不是子视图).当这种翻转发生时 - 翻转前一个子视图位于超视图的前面,另一个子视图位于翻转的背面 - 应该是这样.但我不希望超级视图翻转,只是子视图.
transitionWithView - 仅翻转子视图 - 但在转换发生之前显示'to'视图.
有人有建议吗？
-(IBAction) button1action:(id) sender {
if ([sender tag] == 0) {
[UIView transitionFromView:view2 toView:view1 duration:2.0
options:UIViewAnimationOptionTransitionFlipFromLeft
completion:nil];
}
else {
[view1 removeFromSuperview];
[self.view addSubview:view2];
[UIView transitionWithView:view2
duration:2.0
options:UIViewAnimationOptionTransitionFlipFromRight +
UIViewAnimationOptionShowHideTransitionViews
animations:^{}
completion:nil];
}
}
我正在尝试使用CSS3过渡动画创建动态创建的html元素.
我希望动画在元素创建之前启动.
对于这些我创建一个类来设置元素的原始位置,然后我通过jquery css()方法设置目标位置
但它刚刚在目标位置上出现的新元素没有任何过渡.
如果我使用0ms的setTimeout来设置它的新css值.
有什么我做错了吗？或者是一种限制？我认为我不应该使用setTimeout解决方法.
谢谢!
更新:这是与jsfiddle.net上运行的代码的链接,供您进行实验. http://jsfiddle.net/blackjid/s9zSH/
更新我已经用答案中的解决方案更新了示例.
http://jsfiddle.net/s9zSH/52/
这是一个完整的示例代码
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
//Bind click event to the button to duplicate the element
$(".duplicate").live("click", function (e){
var $to = $("#original .square").clone()
$("body").append($to);
if($(e.target).hasClass("timeout"))
//With setTimeout it work
setTimeout(function() {
$to.css("left", 200 + "px");
},0);
else if($(e.target).hasClass("notimeout"))
// These way it doesn't work
$to.css("left", 200 + "px");
});
</script>
<style type="text/css">
.animate{
-webkit-transition: all 1s ease-in;
}
.square{
width:50px; …我正在尝试使用d3.js创建动画条形图.我希望条形图像这个例子http://nvd3.com/ghpages/multiBar.html一个一个地出现.我能够创建一个类似的行为但是动作从条形的高度开始将条形建立在x轴上,但是我希望动画从x轴开始并像示例那样转到条形的高度.
很多我的代码的简化版本:http: //jsfiddle.net/gorkem/ECRMd/
任何帮助将非常感激
以下问题一直困扰着我好几天,但我只能将它提炼到最简单的形式.考虑以下XAML:
<Window x:Class="VSMTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="CheckBox">
<Setter Property="Margin" Value="3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid x:Name="Root">
<Grid.Background>
<SolidColorBrush x:Name="brush" Color="White"/>
</Grid.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition To="Checked" GeneratedDuration="00:00:03">
<Storyboard Name="CheckingStoryboard">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" Storyboard.TargetProperty="Color">
<DiscreteColorKeyFrame KeyTime="0" Value="LightGreen"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition To="Unchecked" GeneratedDuration="00:00:03">
<Storyboard Name="UncheckingStoryboard">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" Storyboard.TargetProperty="Color">
<DiscreteColorKeyFrame KeyTime="0" Value="LightSalmon"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState Name="Checked">
<Storyboard Name="CheckedStoryboard" Duration="0">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" Storyboard.TargetProperty="Color">
<DiscreteColorKeyFrame KeyTime="0" Value="Green"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Unchecked">
<Storyboard Name="UncheckedStoryboard" Duration="0">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" …请看下面的jsFiddle
您可以单击各种按钮,这些按钮显示不同长度的内容,这会导致框增长/缩小.
我希望高度变化是动画的,所以它不是那么跳跃,我尝试通过添加:
-webkit-transition: all 1s linear;
但这在这个用例中没有任何影响.对于不需要JavaScript的解决方案的任何想法？
谢谢
我创建了一个自定义容器控制器,其工作方式类似于UIPageViewController我可以实现一些自定义转换和数据源逻辑.我试图模仿新的客户视图控制器转换API在iOS 7中的工作方式,除了在取消转换时视图外观回调的一些恼人的怪癖之外它运行良好...
beginAppearanceTransition:animated:和endAppearanceTransition被调用？我的自定义容器类有一些代码如下:
- (BOOL)shouldAutomaticallyForwardAppearanceMethods
{
return NO; // Since the automatic callbacks are wrong for our custom transition.
}
- (void)startTransition:(CustomTransitionContext *)context
{
// Get reference to the view controllers involved in the transition.
UIViewController *oldVC = [context viewControllerForKey:UITransitionContextFromViewController];
UIViewController *newVC = [context UITransitionContextToViewController];
// Prepare parent/child relationship changes.
[oldVC willMoveToParentViewController:nil];
[self addChildViewController:newVC];
// Begin view appearance transitions.
[oldVC beginAppearanceTransition:NO animated:[context isAnimated]];
[newVC beginAppearanceTransition:YES animated:[context isAnimated]];
// Register a completion …我正在尝试在我的应用程序中实现转换,但overridePendingTransition(anim,anim)无法正常工作.
我的代码简单而标准:
启动intent并调用overridePendingTransition:
Intent newsIntent = new Intent(ZPFActivity.this, More2013Activity.class);
startActivity(newsIntent);
overridePendingTransition(R.anim.slide_no_move, R.anim.fade);
finish();
开始动画不应该只做淡入淡出动画应该有效的任何事情.
slide_no_move XML:
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0%p" android:toYDelta="0%p"
android:duration="500"/>
淡出XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<alpha android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="500"/>
</set>
编辑:我忘了提到我开始的活动都扩展了"主要"活动.这可能导致问题吗？
在Objective-C中,使用Sprite-Kit,我会在Objective-C中成功使用类似下面的代码来调出一个新的场景
if ([touchedNode.name isEqual: @"Game Button"]) {
SKTransition *reveal = [SKTransition revealWithDirection:SKTransitionDirectionDown duration:1.0];
GameScene *newGameScene = [[GameScene alloc] initWithSize: self.size];
// Optionally, insert code to configure the new scene.
newGameScene.scaleMode = SKSceneScaleModeAspectFill;
[self.scene.view presentScene: newGameScene transition: reveal];
}
在尝试将我的简单游戏移植到Swift时,到目前为止,我有这个工作......
for touch: AnyObject in touches {
let touchedNode = nodeAtPoint(touch.locationInNode(self))
println("Node touched: " + touchedNode.name);
let touchedNodeName:String = touchedNode.name
switch touchedNodeName {
case "Game Button":
println("Put code here to launch the game scene")
default:
println("No routine established for this") …这非常有效:
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
但有没有人知道使用点击而不是悬停的方法？而不涉及JQuery？
谢谢!